如何样式下拉列表？ [复制]

Posted 2023-03-05

【中文标题】如何样式下拉列表？ [复制]

【英文标题】：How to style drop down list? [duplicate]

【发布时间】：2013-07-16 01:59:42

【问题描述】：

如何在此表单的下拉列表中添加 css 样式？我在互联网上搜索了很多，但没有找到有用的结果。 谢谢

    echo  "<form method='post' action='advisor.php?view=$view'>
    Select Student: <select name='data'>";
    while($row = mysqli_fetch_array($query))
        

                    echo "<option value=\"".$row[3] . "\">".$row[0] ." " . $row[1] . " (".$row[3].")".
                    "</option>";
        
      echo    " </select>
        <input type='submit' name='submit' class='buttonM' value='Show Questions' />
        </form>";
     

【问题讨论】：

风格是什么意思？你想让它看起来像什么？

“风格”有点模棱两可；文本颜色、背景颜色、边框，或者让它看起来像uniform？

你试过什么？您在寻找纯 CSS 或 JS 方法吗？ ***.com/questions/1895476/…

我编辑了问题，我的意思是如何将css样式添加到下拉列表中。

但是<option> 始终是<select> 的子级，并且您还在第二行打开了<select>-标签——它永远不会关闭。你到底想达到什么目的？

【参考方案1】：

如果您的意思是“我如何在表单元素中设置可选选项的样式？”，那么您将很难过。你不能使用纯 CSS 来实现这一点。你可以创建一个“

" 下拉菜单来实现你想要的视觉效果，不过这要看你的表单是做什么用的，真的...

【讨论】：

好的，我怎样才能做到这一点？

【参考方案2】：

看看这个 - http://bavotasan.com/2011/style-select-box-using-only-css/

html

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

css

.styled-select select 
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;

要获得更精细的样式，您需要使用 javascript - 像这样 http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/