限制显示精灵表作为文本框背景

Question

我拥有什么

我有两个文本框，每个文本框都有一个焦点变化的背景图像。所有背景图像都来自一张精灵表。

我需要什么

我需要限制显示多少精灵表，因为文本框大于我希望透露的背景数量。

重要

编辑标记不是一种选择。我需要一个基于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>

使用上面的实例，绝不应该出现多个图标的情况。焦点很好，问题出现在文本框的默认状态。

Answer 1

当输入处于聚焦和未聚焦状态时，您可以在标签上使用一些Javascript到toggleClass。请注意，我将p标签包装到表单中，并使用nth-*选择器来定位标签。

<强> Jsfiddle Example

＆＃13;

＆＃13;

$('input').bind('focus blur', function () {
   $(this).parent('label').toggleClass('focus');
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您可以在输入标记之后移动标签，则可以使用CSS同级选择器~或+来执行此操作。不需要Javascript，请参阅下面的演示。

<强> Jsfiddle Example

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;