如何在Safari和Chrome中設置文本字段樣式

我想爲背景圖像和文本框的形狀以及我的網站[我的網站]上的搜索欄添加邊框。

如果您在Firefox或Opera上訪問它並查看左欄中的搜索欄，那就是我要做的。現在，如果您在Safari或Chrome上訪問它，您應該看到它被替換爲其默認輸入文本字段，這使得文本難以辨認。

即使在這些瀏覽器上，我如何設置我的文本框的樣式？

2011-08-29 Eric Thoma

只是把黑色背景/灰白色的文字，這工作正常在IE8和IE7（仿真）。你的普通CSS應該可以工作，除了圓角。 [JSFiddle here]（http://www.jsfiddle.net/7g3Bh/1/） – Bojangles

要清楚，在您的網站上，您實際上是造型搜索字段而不是文字字段。

<input type="search"> <!-- This is what you have -->

<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 */ 
}

來源

2011-08-29 02:01:15 tw16

@mike：請不要對我的回答進行大量修改。如果你有一個建議，你可以把它放在評論中。 – tw16

我對你的文章所作的編輯與你自己編輯的編輯非常相似。我還要指出，我還向你的代碼添加了評論，這是很好的做法。你的回答很好，但並不完整。你錯過了一些東西（我在編輯中添加了它們，但是之後你再次刪除了它們）。這個網站是關於協作的，關於協作，請參閱http://stackoverflow.com/faq#editing，我將引用這個條目：「如果您對您的貢獻被其他可信用戶協作編輯的想法感到不滿意，這可能會不是你的網站。「 – Mike

的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的鏈接，您可以在這裏對我的示例做一些快速原型設計。

http://jsfiddle.net/mstnorris/nVDbA/

來源

2011-08-29 09:23:46 Mike

如何在Safari和Chrome中設置文本字段樣式

回答

相關問題