html - 限制将 Sprite 表格显示为文本框背景

原文 标签 html css background sprite-sheet

我有的

我有两个文本框,每个文本框都有一个焦点更改的背景图像。所有背景图像均来自一张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-*选择器定位标签。

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>

关于html - 限制将 Sprite 表格显示为文本框背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34769568/

相关文章:

html - Safari选择箭头覆盖的背景图片

html - 在使两个div彼此 float 时遇到一些麻烦

html - html嵌套列表

html - 在某些背景图片上使用css3的降雪效果

java - 更改背景虚线JFreeChart

html - CSS悬停过渡到另一个元素

android - Android 2.3上奇怪的Z-index行为

html - 我如何使rtl文本继续下面的左侧部分

javascript - 如何使用JS更改网页上所有文本的颜色?

css - 具有图像背景的“提交”按钮-CSS