在「ID contains」選擇器上選擇器後應用CSS

編輯：好的，所以我已經瞭解到你不能將僞元素應用於輸入，因爲它們在技術上是空的。什麼是最好的解決方案將涉及不改變投入？我打開jQuery選項。在「ID contains」選擇器上選擇器後應用CSS

我目前有[id*="Cost"]來選擇所有包含Cost這個詞的ID，它的功能非常好。

我想添加以下行:after每個ID，但我似乎無法讓它工作。

<img src="http://img2.wikia.nocookie.net/__cb20120707152654/bindingofisaac/images/e/e8/Small_Rock_Icon.png" alt="rocks" width="20" height="20">

JSFiddle Demo

HTML：

<div class="item">Shovel(
    <input id="shovelCount" type="text" value="0" onfocus="this.blur()" style="width:20px; border:none; text-align:center; background-color:transparent;" />): 
    <input id="shovelBuy" type="button" value="Buy" onclick="javascript:shovel()" /> 
    <input id="shovelCost" type="text" value="15" onfocus="this.blur()" style="border:none; width:50px; text-align:right; background-color:transparent;" /> 
</div>

CSS：

* { 
    margin:0; 
    padding:0; 
} 
body { 
    font:1em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
} 
.item input[type=text] { 
    color:#fff; 
} 
input[type=button] { 
    outline:0; 
    border: 0; 
    background:#333; 
    color:#fff; 
    font-size:70%; 
    /* ... other rules ... */ 
    cursor:pointer; 
    height:100%; 
    width:50px; 
    border-left:1px solid #111; 
    float:right; 
} 
input[type=button]:hover { 
    background: #444; 
} 
.item { 
    color:#fff; 
    background:#333; 
    height:30px; 
    line-height:30px; 
    padding-left:10px; 
    border-bottom:1px solid #222; 
} 
[id*="Cost"] { 
    float:right; 
    line-height:30px; 
    padding-right:20px; 
} 
[id*="Cost"]:after { 
    content: url('http://img2.wikia.nocookie.net/__cb20120707152654/bindingofisaac/images/e/e8/Small_Rock_Icon.png'); 
}

來源

2014-06-15 Mathew MacLean

輸入文本字段不支持僞元素屬性，但也有一些輸入字段如收音機，複選框， –

僞元素不適用於自閉標籤。儘管img有黑客攻擊，但不是用於輸入。原因是自閉標籤沒有任何內容，因此沒有僞元素可以追加到他們 –

評論是正確的。請記住，僞元素成爲他們所屬元素的子代。這將如何與自閉元件一起工作？至於收音機和複選框，我從來不明白爲什麼你可以將僞元素應用到它們上（但是如果我說我從來沒有使用它們，我會撒謊的！） –

因爲你的「shovelCost」是輸入，僞類:before和:after在輸入的值不支持，用別的東西來代替，像<span>，如果你想編輯，添加一個名爲cotenteditable

來源

2014-06-15 15:38:54 Learning

我不需要可以編輯的框，雖然這在刪除它時可能會起作用。\ –

這最終導致了工作，或至少它的一個變種。 –

在「ID contains」選擇器上選擇器後應用CSS

回答

相關問題