Question

编辑：好的，所以我了解到你不能将伪元素应用于输入，因为它们在技术上是空的。那些最好的工作将涉及不改变投入？我对jQuery选项持开放态度。

我目前有[id*="Cost"]来选择包含“费用”一词的所有ID，这些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');
}

Answer 1

因为你的“shovelCost”是一个输入，输入值不支持伪类:before和:after，所以如果你想让它可编辑，请使用别的东西，比如<span>，添加名为cotenteditable

的属性

<span id="shovelCost" contenteditable>15</span>

将选择器后面的CSS应用于“ID contains”选择器

1 个答案: