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

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

$('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，请参阅下面的演示。

Jsfiddle Example

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>