Question

是否可以为＆lt; select＆gt;显示图像而不是所选文本。使用CSS输入？具体来说，我想为移动设备做这个，因为我有一个选择输入，有点太宽，不适合布局（它只有足够的空间容纳几个字母）。所以我想在取消选择选择框时只显示图像而不是文本，但是当用户点击它时仍然使用正常的文本项列表。根据要求，这是我的HTML：＆LT;选择＆GT; ＆lt; option value =“option1”＆gt;选项1＆lt; / option＆gt; ＆lt; option value =“option2”＆gt;选项2＆lt; / option＆gt; ＆lt; option value =“option3”＆gt;选项3＆lt; / option＆gt; ＆lt; option value =“option4”＆gt;选项4＆lt; / option＆gt; ＆LT; /选择＆GT;

Answer 1

这是使用包装器和伪的解决方案。这是一个几乎只有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>

Answer 2

可以通过切换类来显示在所需选择的移动设备的媒体查询中写入的相应图像。

<select id="demo">
    <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

@media and screen (max-width: 767px) {
  #demo { 
   background-repeat: no-repeat;
   background-size: contain;
   height: 30px;
   width: 50px;
   font-size: 0;
  }
  #demo option {
    font-size: initial;
  }
  .opt1 {
   background-image: url("opt1.png");
  }
  .opt2 {
   background-image: url("opt3.png");
  }
  .opt3 {
   background-image: url("opt3.png");
  }
}

用脚本切换选择更改的类。

$("#demo").change(function(){
  var $this = $(this);
      val = $this.val();
  $this.removeClass('opt1 opt2 opt3').addClass('opt'+val);
});

Answer 3

你也可以试试这个：

<强> CSS

select {
  width:500px;
  height:34px;
  padding:10px;
}
select.new {
    border-radius: 0px;
    border: 1px solid #ccc;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    padding-right: 24px;
    background: url(http://i64.tinypic.com/2eyjjmh.png) 97.5% 0px no-repeat #fff;
}

<强> HTML

  <select class="new">
     <option>ONE</option>
     <option>TWO</option>
  </select>

jsfiddle

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

3 个答案: