大家應該都留意到類似谷歌和火狐瀏覽器中都會有自己默認的樣式設置，比如谷歌瀏覽器所有的表單都會添加黃色邊框特效。當網站本身就已經對于表單樣式有一定的設計時，這種默認表單樣式就會讓人覺得多余了！這里我們介紹下如何去掉Chrome谷歌瀏覽器默認的input、textarea的邊框(border)和背景(background) 及Chrome下不可更改textarea大小。

可以用下面的代碼去掉所有元素的邊框輪廓，

01	*:focus {outline:?none;}

用下面的代碼去掉你要去掉的元素的邊框輪廓，

01	.nohighlight:focus {?outline:none; }

你也可以給元素增加你希望的邊框，

01	.changeborder:focus {?outline:blue solid?4px; }

Chrome允許用戶控制textarea表單域的大小，在CSS中加入下面一句就可以了，

01	.textarea {resize:none;}

谷歌會自動加背景的問題：

谷歌瀏覽器內核特有。用：-webkit-appearance:none ? ?解決。

select下拉菜單CSS美化：

當我需要用下拉列表拼湊自定義表單時，我常常不得不使用下拉框（select），由于某些部分是瀏覽器特定的，如下拉箭頭，我花了一段時間去搞清楚如何只使用css輕松地美化下拉框。

下面是一個默認樣式的下拉框的長相：

??

? Here is the first option

?

code：

<select><option>Here is the first option</option><option>The second option</option> </select>

一個選擇框的某些部分我們是可以美化的，比如字體、邊框、顏色、內邊距和背景顏色：

??

? Here is the first option

?

但是煩人的下拉箭頭還是保持不變。沒有直接美化它的方式，但解決方案還是非常簡單的，首先我們需要用一個div容器包裹在select元素外圍：

1 <div class="styled-select"> 2 <select> 3 <option>Here is the first option</option> 4 <option>The second option</option> 5 </select> 6 </div>

下一步我們需要加入一些css，以確保選擇框元素被以某種方式美化：

.styled-select select {background: transparent;width: 268px;padding: 5px;font-size: 16px;border: 1px solid #ccc;height: 34px;-webkit-appearance:?none; /*for chrome*/ }

我們需要確保選擇框的跨度比外圍的div容器更寬，這樣默認的下拉箭頭就會消失（譯者注：選擇框比外面的div寬大，默認的下拉箭頭就會被隱藏）

下面是我們要用的新下拉箭頭：

我們的div容器需要被美化成新的下拉箭頭出現在我們預想的位置：

.styled-select {width: 240px;height: 34px;overflow: hidden;background: url(new_arrow.png) no-repeat right #ddd; }

解決辦法非常容易，不用別的只使用css就能美化您的選擇框。

總結

以上是生活随笔為你收集整理的清除浏览器默认表单边框/背景特效和下拉菜单背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。