webkit htm5 css重置輸入元素

這有點煩人。看來webkit（通過chrome 13 canary）正在設計各種輸入類型，並且以主要方式與設計發生衝突。webkit htm5 css重置輸入元素

特別地，這些是造成我頭痛：

所選元素輝光（通過輪廓）
佔位符=文本樣式
難看輝光周圍集中textarea的和輸入字段

我正在使用樣板和modernizr。使用佔位符的簡單input[type=search]將覆蓋文本樣式。

我知道你可以通過

input::-webkit-input-placeholder

但是它的目標，這似乎並不能夠風格之類的東西text-shadow - 這是一個有點廢話。 有沒有人知道這可能是一個錯誤，將被修復或我需要回落到一個JavaScript的佔位符解決方案？

搜索輸入以白色bg出現，並刪除基本CSS類中定義的圓角。我發現一個重置代碼：

input[type=search]::-webkit-search-decoration, 
input[type=search]::-webkit-search-cancel-button, 
input[type=search]::-webkit-search-results-button, 
input[type=search]::-webkit-search-results-decoration { 
    display: none; 
} 

input[type=search] { 
    /* the webkit overrides need to stay at the top */ 
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box; 
    /* your styles here */ 
}

它有幫助。

我通過設置outline: none修復表格元素周圍的光暈。

我想我真的是一個CSS重置，取出user agent stylesheet（根據網站督察），影響它的任何預定義的風格。是否有任何重置可以做到這一點，儘管doctype是HTML5，元素的呈現方式與HTML5之前一樣簡單，並且遵循基本CSS中的隱式規則設置。

我討厭這樣說，但儘管它的所有內存佔用問題和插件緩慢，但FireFox 4實際上完美地呈現了一切。 Webkit的不應該是努力的風格你的東西，只是提供了一個API，允許你這樣做，如果你想...

來源

2011-06-18 Dimitar Christoff

請告訴我滴周圍的''裝飾的點？裝飾是唯一使它不同於普通的'type = text'字段的東西。如果你不想裝飾，你可以使用''。 – Spudley

語義和可能的掌上電腦行爲。無論如何，任何html-5元素都有什麼意義，我們對div和輸入[type = text]都很好。 :)重點是，我應該能夠對它們進行樣式設計，但是如果我選擇，而不是通過填充的用戶代理樣式，則必須是可選的 –

@Spudley在（至少）Safari中，也具有「 x「（清除）按鈕，如果輸入文本。 –

一個好的窗體重置樣式表（帶有一點JS）是Formalize。

Formalize會重置所有內容，而不是確保跨瀏覽器的一致表單。

來源

2011-06-27 12:59:33 christiangeek

歡呼，但它不是我會用的，https://github.com/nathansmith/formalize/blob/master/assets/css/_formalize.sass提供了一些有趣的想法，所以我會接受它。 –

馬克朝聖者從"HTML5: Up and Running"報價：

「的placeholder atttribute能只有包含文本，而不是HTML標記但是，有一些供應商特定的CSS擴展（http://trac.webkit.org/export/37527/trunk/LayoutTests/fast/forms/placeholder-pseudo-style .html），允許您在某些瀏覽器中設置佔位符文本的樣式。

所以我想你至少會回到你的問題的腳本解決方案，特別是考慮到目前爲止沒有IE版本支持佔位符文本。

來源

2011-06-22 18:50:10 daysrunaway

CSS重置樣式總是一個好的開始，因爲它們可以節省您的首選。

如果你想刪除發光，你可以像你說的那樣用輪廓屬性來玩一點，也可以設置text-shadow:none。

無論如何，它只是猜測你是否首先不嘗試重置樣式與重置，畢竟他們是專門爲使每個瀏覽器顯示相同的網頁。

來源

2011-06-23 14:47:30

就是這樣，它們在每個瀏覽器中都不顯示。我對FireFox如何做而不是webkit感到非常滿意。 –

然後我肯定會從重置樣式表開始，直到現在我已經對YUI CSS Reset，Fonts和Base感到滿意。無論如何，最終我會創建自己的樣式表，因爲許多這些東西並不是我的網站所需要的，還有其他的我需要而且不在那裏。但無論如何它確實很有幫助。 –

樣板文件使用混合包css重置，其中包含來自YUI的元素以及其他元素。但它們不包含html5輸入元素樣式。 –

雖然這可能需要您定義其他樣式，但我通常將-webkit-appearance:none放置在大多數表單元素上。

來源

2012-10-19 19:40:22

這似乎對我被完全工作：

input[type=search]::-webkit-search-cancel-button, 
input[type=search]::-webkit-search-decoration, 
input[type=search]::-webkit-search-results-button, 
input[type=search]::-webkit-search-results-decoration { 
    -webkit-appearance:none; 
} 
input[type=search] { 
    -webkit-appearance:textfield; 
    -webkit-box-sizing:content-box; 
}

來源

2013-09-17 08:02:24

webkit htm5 css重置輸入元素

回答

相關問題