Question

我想放大选择标签的箭头，并将其背景设置为绿色。框的宽度必须为100px，高度为50px。我尝试了很多CSS，但是没有成功 .select_box { 宽度：100; 溢出：隐藏；边框：1个实体＃000；职位：相对字号：12；填充：10 15; 左边距：10; 上边距：5; } .select_box：之后{ 宽度：10; 高度：50; 左边框：6个纯色透明；右边框：6透明的纯色；边框顶部：6纯白色; 位置：绝对；最高：40％；正确：5；内容：“”； z索引：98；背景颜色：绿色；背景尺寸：自动； } .select_box选择{ 宽度：110; 边界：0; 职位：相对 z索引：99；背景：无； }

<选择>

Answer 1

您不能在选择之后，之前使用，但是可以使用如下背景： https://codepen.io/Lincox/pen/mQRpPm

/*Remove style of select*/
select{
    -webkit-appearance: none;
    -moz-appearance: none;
}

.custom-select{
  width: 100px;
  height: 50px;
  background: url(https://mbtskoudsalg.com/images/arrow-keys-png-image-7.png) right 10px center/10px 10px no-repeat;
  background-color: green;
}

.custom-select2{
  width: 100px;
  height: 50px;
  background: url(https://static.thenounproject.com/png/4350-200.png) right 10px center/20px 20px no-repeat;
  background-color: red;
}

<select class="custom-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select class="custom-select2">
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

接受并让我知道它是否有效

Answer 2

尝试这个：

<label>yes</label><input type="radio" name="rad1" value="yes">
<label>no</label><input type="radio" name="rad1" value="no" >

<br>
<br>

<label>yes</label><input type="radio" name="rad2" value="yes" >
<label>no</label><input type="radio" name="rad2" value="no">

<br>
<br>


<label>yes</label><input type="radio" name="rad3" value="yes">
<label>no</label><input type="radio" name="rad3" value="no">



 var rad = document;

 var radios = document.querySelectorAll('input[type=radio]');

Array.prototype.forEach.call(radios, function(radio) {
   radio.addEventListener('change', calculate);
});


    function calculate(){
    console.log('ss')
            var count = 0;
      var options = document.getElementsByName("rad1");
      if (options) {
          for (var i = 0; i < options.length; i++) {
              if (options[i].checked){
                   if(options[i].value=='yes'){
                                        count++;           
                   }
              }
          }
      }  

      var options = document.getElementsByName("rad2");
      if (options) {
          for (var i = 0; i < options.length; i++) {
              if (options[i].checked){
                   if(options[i].value=='yes'){
                                        count++;           
                   }
              }
          }
      } 

      var options = document.getElementsByName("rad3");
      if (options) {
          for (var i = 0; i < options.length; i++) {
              if (options[i].checked){
                   if(options[i].value=='yes'){
                                        count++;           
                   }
              }
          }
      } 

      if(count>2)
      {
         alert('count is 2 or more, paas this guy!'); 
      }

    }

.select-style {
  position: relative;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  width: 100px;
  heigh: 30px;
  overflow: hidden;
  background: transparent
    url("https://i.imgur.com/qJolQ2D.png") no-repeat
    93% 50%;
}
.select-style select {
  padding: 5px 8px;
  width: 150%;
  border: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select-style select:focus {
  outline: none;
}
.select-style:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 100%;
  background-color: #77d800;
  top: 0;
  right: -1px;
  z-index: -1;
  border-radius: 0 1px 1px 0;
}

来源：How to put background-color only a section of a select? CSS

如何创建自定义<select>？

2 个答案: