android - 在<select>输入中显示图像而不是所选文本？

是否可以使用CSS为<select>输入显示图像而不是所选文本？

具体来说，我想对移动设备执行此操作，因为我的选择输入范围太宽，无法很好地适合布局（无论如何它也有足够的空间容纳几个字母）。因此，我想在未选择选择框时仅显示图像而不是文本，但是当用户点击它时仍使用常规的文本项列表。

根据要求，这是我的HTML：

<select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
</select>

最佳答案

这是使用包装程序和伪函数的解决方案。这几乎是仅CSS的解决方案，它需要一个小的脚本才能工作，并且由于它成为最小的内联代码，因此我将其添加进来。

将以下所有内容包装在媒体查询中，以控制应插入的尺寸。

[data-select] {
  position: relative;
  display: inline-block;
}
[data-select]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
[data-select].idx::before {           /* add arrow when an option is selected */
  content: '';
  position: absolute;
  right: 4px;
  top: 11px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 1
}
[data-select] select {
  height: 30px;
  width: 80px;
  font-size: 16px;
}
[data-select].idx select {            /* hide text when an option is selected */
  font-size: 0;
}
[data-select].idx option {            /* reset text when an option is selected */
  font-size: 16px;
}
[data-select] option:first-child {
  display: none;                      /* remove first option from list */
}
[data-select].idx.nr1::after {
  background-image: url(http://placehold.it/100x50/bbb);
}
[data-select].idx.nr2::after {
  background-image: url(http://placehold.it/100x50/f99);
}
[data-select].idx.nr3::after {
  background-image: url(http://placehold.it/100x50/9f9);
}
[data-select].idx.nr4::after {
  background-image: url(http://placehold.it/100x50/6bf);
}

<div data-select>
  <select onchange="this.parentElement.className = 'idx nr' + this.selectedIndex;">
    <option>Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>

这是使用addEventListener的更推荐方法

window.addEventListener('load', function(){
  /* if only one select, use querySelector() */

  document.querySelector('div[data-select]').addEventListener('change', function(e){
    this.className = e.target.dataset.class + e.target.selectedIndex;
  })

  /* if more than one select, use querySelectorAll() */
  /*
  var ds = document.querySelectorAll('div[data-select]');
  for (var i = 0; i < ds.length; i++) {
    ds[i].addEventListener('change', function(e){
      this.className = e.target.dataset.class + e.target.selectedIndex;
    })
  }
  */
})

[data-select] {
  position: relative;
  display: inline-block;
}
[data-select]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
[data-select].idx::before {           /* add arrow when an option is selected */
  content: '';
  position: absolute;
  right: 4px;
  top: 11px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 1
}
[data-select] select {
  height: 30px;
  width: 80px;
  font-size: 16px;
}
[data-select].idx select {            /* hide text when an option is selected */
  font-size: 0;
}
[data-select].idx option {            /* reset text when an option is selected */
  font-size: 16px;
}
[data-select] option:first-child {
  display: none;                      /* remove first option from list */
}
[data-select].idx.nr1::after {
  background-image: url(http://placehold.it/100x50/bbb);
}
[data-select].idx.nr2::after {
  background-image: url(http://placehold.it/100x50/f99);
}
[data-select].idx.nr3::after {
  background-image: url(http://placehold.it/100x50/9f9);
}
[data-select].idx.nr4::after {
  background-image: url(http://placehold.it/100x50/6bf);
}

<div data-select>
  <select data-class='idx nr'>
    <option>Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>