添加填充來選擇，而不是選擇標籤

我與padding-left和padding-right一個顯著量的簡單select下拉菜單：添加填充來選擇，而不是選擇標籤

如果單擊select輸入，你會發現option標籤也具有相同適用的數量爲padding-left和padding-right。但是，我希望填充僅適用於select標記，但不適用於option標記（即option標記沒有填充）。

我該怎麼做？

select { 
 
    width: 400px; 
 
    background: lightgray; 
 
    padding: 12px 48px; 
 
}

<select> 
 
\t <option>Option 1</option> 
 
\t <option>Option 2</option> 
 
\t <option>Option 3</option> 
 
\t <option>Option 4</option> 
 
\t <option>Option 5</option> 
 
</select>

來源

2017-10-13 user8685685

這似乎在Chrome，火狐沒有。 –

這可能有幫助：https：//codepen.io/rcdesign/pen/GexmJ – Vishnu

如果你想要不同的風格選項，你可以使用'select> option'。 –

我做了一些研究，我發現這一點：

不幸的是，WebKit的瀏覽器不支持的標籤造型呢，除了顏色和背景顏色。

最廣泛使用的跨瀏覽器解決方案是使用<ul>/<li>和使用CSS的樣式。像Bootstrap這樣的框架做得很好。

來源：How to style a select tag's option element?

來源

2017-10-13 06:41:05

據我所知的選擇框，下拉瀏覽器引擎得到呈現。這意味着它們不可更改。

所以唯一的解決方案是使用一個框架（因爲這個原因有很多外面的）或者自己構建一個框架。

如果您在開發人員控制檯中查看，您還會看到選項元素的大部分樣式都由瀏覽器繼承並呈灰色。

來源

2017-10-13 06:43:32 Doomenik

試試這個：

$(document).ready(function(){ 
 
    $('.sel').click(function(){ 
 
     $('ul').toggle(); 
 
    }) 
 

 
    $('li').click(function(){ 
 
     $('.sel input[type=text]').val($(this).html()); 
 
     $('ul').hide(); 
 
    }) 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    width: 400px; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
.sel { 
 
    position: relative; 
 
    width: inherit; 
 
    border: 1px solid #000; 
 

 
} 
 

 
.sel input[type="text"]{ 
 
    width: 100%; 
 
    background: lightgray; 
 
    padding: 12px 48px; 
 
    border-style: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
} 
 

 
.sel span { 
 
    position: absolute; 
 
    right: 25px; 
 
    top: 10px; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    background: lightgray; 
 
    width: 100%; 
 
    display: none; 
 
    z-index: 999; 
 
} 
 

 
li { 
 
    padding: 10px 0; 
 
} 
 

 
li:hover { 
 
    background-color: skyblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="sel"> 
 
     <input type="text" readonly="readonly" value="Option1"><span>▼</span> 
 
    </div> 
 
    <ul> 
 
     <li>Option1</li> 
 
     <li>Option2</li> 
 
     <li>Option3</li> 
 
    </ul> 
 
</div>

來源

2017-10-13 07:21:06 Ehsan

添加填充來選擇，而不是選擇標籤

回答

相關問題