我想為選擇輸入中的選項設定樣式
我想為選項添加填充，請幫助我
label{
font-size: 15px;
font-family: 'arial';
display: inline;
}
select{
display: inline;
padding: 5px 10px;
}
option{
padding: 10px;
}<label for="fruits">Fruits</label>
<select name="fruits">
<option>Apple</option>
<option>Mango</option>
<option>Banana</option>
<option>MuskMelon</option>
</select>uj5u.com熱心網友回復：
您不能在這樣的選項選單中進行太多更改。如果要制作完整的自定義下拉選單，則必須自己制作所有組件。我很確定您只能更改選項元素中的文本，但不能更改周圍環境，如果可以的話，您可能必須使用 javascript 而不是 css
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}<div class="dropdown">
<button class="dropbtn">Fruit</button>
<div class="dropdown-content">
<a href="#">Apple</a>
<a href="#">Mango</a>
<a href="#">Banana</a>
<a href="#">MuskMelon</a>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/463119.html
上一篇：如何使我的表單在鍵盤輸入時可滾動