的樣式附加到文本輸入

我想要的風格，先輸入字段，除複選框和單選按鈕的所有標籤的標籤。的樣式附加到文本輸入

使用〜選擇器我已經得到了一切工作，除了「文本」輸入標籤 - 我嘗試的每一個其他類型將應用風格，但文本沒有，我一直盯着它太長時間。

HTML

<form> 
    <label for="MyText">Text Field</label> 
    <input id="MyText" type="text" /><br /> 

    <label for="MyUrl">Url Field</label> 
    <input id="MyUrl" type="url" /><br /> 

    <label for="MyCheck">Checkbox</label> 
    <input id="MyCheck" type="checkbox" /><br /> 
</form>

CSS

INPUT:not([type="radio"]):not([type="checkbox"]) ~ LABEL { 
    width: 100px; 
} 

INPUT:not([type="radio"]):not([type="checkbox"]) { 
    width: 200px; 
} 

LABEL { display: inline-block; }

我想，以避免ID或類指定文本輸入標籤，以保持我的代碼清潔。

我有一個的jsfiddle這也：http://jsfiddle.net/buzzsurfr/GWk96/1/

編輯：這個截圖是從的jsfiddle。我嘗試使用FF & Chrome。 Text Input Label is not lined up with one below it (a "url")

來源

2013-05-17 Theo

這兩個選擇器似乎工作正常.. – Yana

它也適用於我。 – Ligth

我添加了我在JSFiddle中看到的圖像。「文本字段」標籤與IE，FF和Chrome中的第一個CSS分配不匹配。 – Theo

您可以在HTML中替換input和label，這將允許您使用+，意思是「緊隨其後」，以便應用樣式。要將它們交換回來，您可以使用float。事情是這樣的：

HTML

<form> 
    <input id="MyText" type="text" /> 
    <label for="MyText">Text Field</label> 
    <br /> 
    <input id="MyUrl" type="url" /> 
    <label for="MyUrl">Url Field</label> 
    <br /> 
    <input id="MyCheck" type="checkbox" /> 
    <label for="MyCheck">Checkbox</label> 
    <br /> 
</form>

CSS

INPUT:not([type="radio"]):not([type="checkbox"]) + LABEL { 
    width: 100px; 
} 

INPUT:not([type="radio"]):not([type="checkbox"]) { 
    width: 200px; 
} 

LABEL { 
    display: inline-block; 
    float: left; 
} 

BR { 
    clear: both; 
}

小提琴http://jsfiddle.net/G3FED/3/

更多信息有關+ CSS選擇器，你可以在這裏找到http://www.w3.org/TR/selectors/#adjacent-sibling-combinators

來源

2013-05-17 19:35:26 Vadim

你的代碼工作，因爲它應該你的標籤附着在文字輸入的目標不是becouse沒有一個輸入變量作爲

此代碼前面的元素使用的是：

INPUT:not([type="radio"]):not([type="checkbox"]) ~ LABEL { 
    width:300px; 
}

說：

針對前面有輸入和此輸入等的所有標籤等，因爲沒有文字標籤不會有針對性

注意前面輸入：我想你的目標標籤,,,,,

來源

2013-05-17 19:15:13 Fico

如果你正在尋找一個「前面的」 CSS選擇器，據我所知沒有一個。

所以，你最好的選擇，假設你在HTML和控制不僅是CSS，是類添加到您想要的風格標籤。這將是最簡單，最乾淨和跨瀏覽器的解決方案。

現在，如果你想，到樣式的所有標籤的形式，除了遵循一些其他元素（比如，複選框），標籤也許這種方法會爲你工作：

風格所有標籤下面的複選框
覆蓋標籤/收音機

像這樣：

label { 
    width: 100px; 
    background:#ccc; 
} 

input[type="checkbox"] + label { 
    background:#eee; 
    display:inline; 
}

及強制性fiddle。

來源

2013-05-17 19:30:03 DannyB

這把小提琴看起來和我的完全一樣。你能檢查它嗎？ – Theo

不知道那小提琴發生了什麼事。我已更新鏈接。 – DannyB

的樣式附加到文本輸入

回答

相關問題