我還沒有在IE上測試過它。如何在Safari和Chrome中設置文本字段樣式
我想爲背景圖像和文本框的形狀以及我的網站[我的網站]上的搜索欄添加邊框。
如果您在Firefox或Opera上訪問它並查看左欄中的搜索欄,那就是我要做的。現在,如果您在Safari或Chrome上訪問它,您應該看到它被替換爲其默認輸入文本字段,這使得文本難以辨認。
即使在這些瀏覽器上,我如何設置我的文本框的樣式?
我還沒有在IE上測試過它。如何在Safari和Chrome中設置文本字段樣式
我想爲背景圖像和文本框的形狀以及我的網站[我的網站]上的搜索欄添加邊框。
如果您在Firefox或Opera上訪問它並查看左欄中的搜索欄,那就是我要做的。現在,如果您在Safari或Chrome上訪問它,您應該看到它被替換爲其默認輸入文本字段,這使得文本難以辨認。
即使在這些瀏覽器上,我如何設置我的文本框的樣式?
要清楚,在您的網站上,您實際上是造型搜索字段而不是文字字段。
<input type="search"> <!-- This is what you have -->
VS
<input type="text">
要刪除默認的樣式,讓你的CSS屬性來工作,你需要改變-webkit-appearance
屬性。這應該做的伎倆:
#s {
min-width:98%;
background-color:#2a2a2a;
color:#d3d3d3;
border:2px solid #000000;
font-size:.85 em;
height:1.9em;
display:inline !important;
border-radius:5px 5px 5px 5px;
outline:none;
-webkit-appearance: none; /* add this */
}
的style.css
body {
background: #999 url(your_image_here.jpg);
}
.search {
width: 295px; /* 300px less the 5px of left padding*/
height: 30px;
line-height: 30px; /* same as height, then you can vertically align the text in the middle*/
vertical-align: middle;
font-size: 24px; /* this gives 3px at the top and bottom */
background-color:#ccc; /* a light grey background in the text box */
color:#333; /* dark grey font colour */
padding-left: 5px; /* spacing (padding) within the left hand side of the text box */
border: 1px solid #000; /* 1px wide black border around the text box */
display:inline !important;
border-radius:5px 5px 5px 5px; /* slightly rounded corners, the order of the values is TOP RIGHT BOTTOM LEFT */
outline:none;
-webkit-appearance: none; /* this removed the default styling */
}
的index.html
<input type="text" class="search" value="search"> <!-- I've given the text box a value (search) so that you can test your css edits quickly without having to type in a value every time you refresh the page -->
我覺得這個回答你的問題。如果我有任何進一步的幫助,請回復我的評論。
這是一個jsfiddle的鏈接,您可以在這裏對我的示例做一些快速原型設計。
只是把黑色背景/灰白色的文字,這工作正常在IE8和IE7(仿真)。你的普通CSS應該可以工作,除了圓角。 [JSFiddle here](http://www.jsfiddle.net/7g3Bh/1/) – Bojangles