更改HTML中下拉列表的样式_Html_Css

更改HTML中下拉列表的样式

html css

更改HTML中下拉列表的样式,html,css,Html,Css,我使用 <select></select> 标签。我使用的代码是： <html> <body> <select name="ans" > <option> select 1</option> <option> select 2</option> </select> </body> </html> 选择1 选择2 这是我可以更改列表样式的一种

我使用

<select></select>

标签。我使用的代码是：

<html>
<body>
<select name="ans" >
<option> select 1</option>
<option> select 2</option>
</select>
</body>
</html>


选择1
选择2

这是我可以更改列表样式的一种方法，如下拉箭头或其中的文本。

如果您想设置下拉按钮的样式，可以采用以下方法。其思想是通过将原始选择的不透明度降低为0来隐藏它，但仍保留其功能。为此，我们还需要一点JS（只是一点），以便在更改select中的选项值时更改文本值

CSS：

.selectWrap {
  /* Style your own select-box here */
  background: #ddd;
  border: 1px solid black;
  color: #333;

  /* Your new Arrow */
  /* Created with the after-pseudo-element to save Markup,
     Styled the arrow with help of the border-trick to provide Retina-ready arrow */
  &:after {
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    content: "";
    right: 20px;
    position: absolute;
    top: 20px;
  }

  height: 30px;
  position:relative;
}


/* Hide the original select */
select {
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;

  /* Hide the select cross-browser */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0.0;
  -khtml-opacity: 0.0;
  opacity: 0.0;
}

HTML：

<div class="selectWrap">
  <select>
    <option>one</option>
    <option>two</option>
  </select>

  <div class="selectText">Please choose..</div>
</div>

你可以设置一点样式，但根据我的经验，它们很难设置样式，我认为有些人使用javascript来实现这一点。我建议使用名为jQuery Selected的插件，启用更好的选择框，并附带易于控制的css。有人能告诉我如何在jQuery中进行设置。搜索“jQuery SelectBox”

/* Always when the option in the select is changed, change the text of our selectWrap */
$(document).ready(function () {
  $('.selectWrap select').on('change', function (e) {
     var wrap = $(e.target).parents('.selectWrap');
     wrap.find('.selectedText').html(this.options[this.selectedIndex].innerHTML);
  });
});