5個必須知道的css自訂代碼

來源:互聯網
上載者:User
在製作頁面時,經常會遇到需要自訂一些標籤的預設行為(如:input的預留位置等),但這些預設的設定的css一般比較難記住,所以有必要自己做一下記錄。下面是我經常用到的一些重設預設行為的css。

1、預留位置

在 <input> 標籤中設定 placeholder 屬性時,有時候因為需求,要修改預留位置的預設顏色或者字型大小,這是就可以用下面的css:

// firefoxinput::-moz-placeholder {    color: red;    font-size: 18px;  }// IEinput:-ms-input-placeholder {  color: red;  font-size: 18px;}// chromeinput::-webkit-input-placeholder {  color: red;  font-size: 18px;}

需要注意的是不同瀏覽器寫法不同:

都要加上各自瀏覽器的首碼(如 -webkit- );

firefox的 placeholder 的前面沒有 input- ;

firefox與chrome都是 :: 兩個冒號,而IE則是一個 : ;

低版本的瀏覽器與新版本瀏覽器可能寫法不同;

2、下拉框的小三角

select 標籤會出現小三角,通常這個小三角我都會去掉,或者用背景圖片的方式替換為符合要求的樣子。去掉小三角的css:

-webkit-appearance: none; -moz-appearance: none;

在IE瀏覽器中目前還沒找到可以去掉小三角的方法。

3、input[type=number]右邊的spinners

nput[type=number] 通常用在移動端裝置上,瀏覽器會識別number輸入類型,然後改變數字鍵台來適應它。但是它會出現spinners,一般不需要它。去掉spinners的css如下:

// firefoxinput[type='number'] {  -moz-appearance:textfield;}// chromeinput[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none;  margin: 0;}

4、-webkit-tap-highlight-color

在移動端瀏覽器上(如、QQ內建瀏覽器),當你點擊一個連結或者通過Javascript定義的可點擊元素的時候,會出現藍色邊框,我是很討厭這個邊框的,所以一般我會去除:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

將高亮色設為透明,這樣就看不到藍色邊框了。

5、捲軸

webkit現在支援擁有overflow屬性的地區,列表框,下拉式功能表,textarea的捲軸自訂樣式。有時候需要把捲軸去掉,特別是頁面中出現幾條捲軸的時候:

::-webkit-scrollbar {  width: 0;}

設定捲軸的寬度為0就可以去除捲軸了。如果需要自訂捲軸樣式可以點擊 www.xuanfengge.com/css3-webkit-scrollbar.html ,裡面介紹了如何自訂捲軸樣式。

上面記錄了我在項目中常用的比較不容易記憶的css代碼。如果朋友們也有比較常用的不太容易記住的css代碼,歡迎幫忙補充。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤(2)-css視頻教程

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.