去除select邊框和三角-----appearance:none

標籤：src   blog   舉例   情況   TE   --   ==   保留   border   

今天發現一個比較有意思的屬性，appearance:none

可能有朋友不認識，但是有一個標籤你肯定認識：select。

這個標籤的樣式是這樣的：

一般情況下，我們所使用的border:0; 去除邊框這種方式在某些瀏覽器是對它是不起作用的，比如:Opera 瀏覽器下就沒有作用。

再拿google瀏覽器舉例，雖然有作用，邊框可以去除掉，但是右邊的倒三角卻保留了下來。

比如這樣：

如果想要將select的邊框和倒三角全部去除掉，這裡有兩個方法和大家分享一下。

1.可以在select的外部包一個div標籤，設定超出隱藏屬性，設定好裡面select的寬度和高度即可。

2.如果覺得上面的方法比較麻煩，可以使用Css3的一個屬性。

appearance:none

-moz-appearance:none /*Firefox*/

-webkit-appearance:none /*蘋果和Google*/

去除select邊框和三角-----appearance:none