更改下拉列表的样式在HTML

我已经使用更改下拉列表的样式在HTML

<select></select>

标签创建以下下拉列表。，我使用的代码是：

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

是他们的一种方法，我可以改变列表的风格，像下拉箭头或在它的文本。

来源

2013-02-12 Anurag-Sharma

您可以风格一点点，但是从我的经验，他们都很难风格，我认为有些人使用javascript来做到这一点 – iConnor 2013-02-12 08:18:09

我曾经推荐过使用一个名为jQuery Chosen的插件，可以下注ter选择框并附带一个易于控制的css。 – 2013-02-12 08:18:52

任何人都可以告诉我如何在jQuery中做到这一点。 – 2013-02-12 08:20:26

如果您想设计下拉式按钮，您可以采用以下方法。这个想法是隐藏原来的选择通过降低其不透明度为0，但仍然保持其功能。我们还需要一些JS（这只是一点点），当您更改选择中的选项值时更改文本值。

的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的）：

/* 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); 
    }); 
});

来源

2013-02-12 08:59:58

更改下拉列表的样式在HTML

回答

相关问题