限制将 sprite sheet 显示为文本框背景
Limiting revealing of sprite sheet as text box background
我有什么
我有两个文本框,每个文本框都有一个随焦点变化的背景图像。所有背景图像均来自一个精灵 sheet.
我需要什么
我需要限制 sprite sheet 的显示量,因为文本框大于我希望显示的背景量。
重要
无法编辑标记。我需要一个基于 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>
我有什么
我有两个文本框,每个文本框都有一个随焦点变化的背景图像。所有背景图像均来自一个精灵 sheet.
我需要什么
我需要限制 sprite sheet 的显示量,因为文本框大于我希望显示的背景量。
重要
无法编辑标记。我需要一个基于 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>