我有什么
我有两个文本框,每个文本框都有一个随焦点变化的背景图像。所有背景图像都来自一个 Sprite 表。
我需要什么
我需要限制 sprite 表的显示量,因为文本框大于我希望显示的背景量。
重要
编辑标记不是一种选择。我需要一个基于 CSS 的解决方案。
我的代码
#foo,
#bar {
background-position: left center;
background-repeat: no-repeat;
background-size: 100px 100px;
background-image: url("http://s30.postimg.org/5huu7u8ip/test.png");
padding: 0 1em;
padding-left: 50px;
font-size: 17px;
height: 3em;
}
#foo {
background-position: 0px 0px;
}
#bar {
background-position: 0px -50px;
}
#foo:focus {
background-position: -50px 0px;
}
#bar:focus {
background-position: -50px -50px;
}
<p>Click into and out of each box to toggle default and focus states:</p>
<p>
<label for="foo">
<input type="text" size="20" value="" class="input" id="foo" placeholder="foo" name="foo">
</label>
</p>
<p>
<label for="bar">
<input type="text" size="20" value="" class="input" id="bar" placeholder="bar" name="bar">
</label>
</p>
使用上面的实例,永远不会出现显示多个图标的情况。焦点上没问题,问题出现在文本框的默认状态。
最佳答案
当输入处于焦点和非焦点状态时,您可以使用一些 Javascript 在标签上 toggleClass
。请注意,我将 p 标签包装成一个表单并使用 nth-*
选择器来定位标签。
$('input').bind('focus blur', function () {
$(this).parent('label').toggleClass('focus');
});
label:before {
content: "";
display: inline-block;
background-position: left center;
background-repeat: no-repeat;
background-size: 100px 100px;
background-image: url("http://s30.postimg.org/5huu7u8ip/test.png");
width: 50px;
height: 50px;
vertical-align: top;
}
input[type="text"] {
padding: 0 1em;
font-size: 16px;
height: 50px;
box-sizing: border-box;
}
form p:nth-child(1) label:before {
background-position: 0px 0px;
}
form p:nth-child(2) label:before {
background-position: 0px -50px;
}
form p:nth-child(1) label.focus:before {
background-position: -50px 0px;
}
form p:nth-child(2) label.focus:before {
background-position: -50px -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Click into and out of each box to toggle default and focus states:</p>
<form>
<p>
<label>
<input type="text" size="20" value="" class="input" id="foo" placeholder="foo">
</label>
</p>
<p>
<label>
<input type="text" size="20" value="" class="input" id="bar" placeholder="bar">
</label>
</p>
</form>
如果你可以在输入标签之后移动标签,那么你可以使用 CSS 兄弟选择器 ~
或 +
来完成它。不需要 Javascript,请参阅下面的演示。
label {
content: "";
display: inline-block;
background-position: left center;
background-repeat: no-repeat;
background-size: 100px 100px;
background-image: url("http://s30.postimg.org/5huu7u8ip/test.png");
width: 50px;
height: 50px;
float: left;
margin-right: 4px;
}
input[type="text"] {
padding: 0 1em;
font-size: 16px;
height: 50px;
box-sizing: border-box;
}
#foo + label {
background-position: 0px 0px;
}
#bar + label {
background-position: 0px -50px;
}
#foo:focus + label {
background-position: -50px 0px;
}
#bar:focus + label {
background-position: -50px -50px;
}
<p>Click into and out of each box to toggle default and focus states:</p>
<p>
<input type="text" size="20" value="" class="input" id="foo" placeholder="foo">
<label></label>
</p>
<p>
<input type="text" size="20" value="" class="input" id="bar" placeholder="bar">
<label></label>
</p>
关于html - 限制显示 Sprite 表作为文本框背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34769568/