在“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

回答

相关问题