更改下拉列表的樣式在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

回答

相關問題