添加类以选择标签答案

【问题标题】：Adding class to select tag添加类以选择标签
【发布时间】：2021-01-25 12:07:51
【问题描述】：

我正在尝试向选择标签添加一个类，以便下拉菜单可以继承一些 CSS 样式，但我无法应用该样式。我的课程格式不正确吗？

这是我的代码：

packagesmenu {
    box-shadow: none!important;
    background: transparent!important;
    background-color: transparent!important;
    padding: 8px 5px!important;
    border-top: 1px solid #AAA!important;
    border-left: 1px solid #AAA!important;
    border-right: 1px solid #AAA!important;
    border-bottom: 1px solid #AAA!important;
    max-width: 100%!important;
    outline: none;
    border-radius: 0;
    margin-bottom:15px!important;
    text-transform:none!important;
}

packagesmenu:focus {
box-shadow: 0 0 5px 0 #ee2b30!important;
border-top: 1px solid #ee2b30!important ;
    border-left: 1px solid #ee2b30!important;
    border-right: 1px solid #ee2b30!important;
    border-bottom: 1px solid #ee2b30!important;
}

<select style="width:100%;display:block;max-width:600px;margin:0 auto;" onchange="window.location.href = this.value" class="packagesmenu" name="packagesmenu" >
<option>Find your location</option>
<option value="https://go.booker.com/location/vixennailsandspamilton/buy/series">
  Milton
</option>
<option value="https://go.booker.com/location/vixennailsandspamississauga/buy/series">
  Mississauga</option>
<option value="https://go.booker.com/location/vixennailsandspadanforth/buy/series">
  Danforth
</option>
<option value="https://go.booker.com/location/vixenburlington/buy/series">
  Burlington
</option>
<option value="https://go.booker.com/location/VixenNailsandSpaOakville/buy/series">
  Oakville
</option>
</select>

【问题讨论】：

这个php有什么关系？您的标题 "Adding class to select tag in php" 仅在其中声明，仅此而已。
对不起，我猜不是。我对这种类型的代码不太熟悉。我的错误，但我仍然需要一些帮助来解决这个问题。
好吧，看到你的 CSS，packagesmenu 都缺少点，因为你将它们用作类。将packagesmenu 都更改为.packagesmenu，看看会发生什么。如果您依赖 ID，请使用井号 #packagesmenu，但我怀疑是这种情况。
谢谢，由于某种原因它仍然无法正常工作，但是在选择行中是否正确添加了类？

标签： css select dropdown

【解决方案1】：

我清理了你的 CSS。内联css也是。不要使用内联样式——这很糟糕而且很难维护，有一天你会发现，现在请相信我。不要使用!importand，这是不好的做法，请不要使用。

在css中声明：

一个元素bodyselect使用标签
一个类.someclass使用点和类名
一个 id #bigid 使用哈希和 id 名称

没有空格。但是在: 和; 之后总是放空格。现在允许不带空格，但良好的做法、可读性和传统是严格的 - 空格！

body{
background: #000;           /* this to see background of select */
}
select{                 /* no inline css */
display: block;
width: 100%;
max-width: 600px;
margin: 0 auto;
color: #aaa;
}
.packagesmenu {
background: 0;
border: 1px solid #aaa;
border-radius: 0;
outline: none;
max-width: 100%;
padding: 8px 5px;
margin-bottom: 15px;
}
.packagesmenu:focus {
box-shadow: 0 0 5px 0 #ee2b30;
border: 1px solid #ee2b30;
}

<select onchange="window.location.href = this.value" class="packagesmenu" name="packagesmenu" >
<option>Find your location</option>
<option value="https://go.booker.com/location/vixennailsandspamilton/buy/series">
  Milton
</option>
<option value="https://go.booker.com/location/vixennailsandspamississauga/buy/series">
  Mississauga</option>
<option value="https://go.booker.com/location/vixennailsandspadanforth/buy/series">
  Danforth
</option>
<option value="https://go.booker.com/location/vixenburlington/buy/series">
  Burlington
</option>
<option value="https://go.booker.com/location/VixenNailsandSpaOakville/buy/series">
  Oakville
</option>
</select>

【讨论】：

【解决方案2】：

在 CSS 中，class selector 是一个以句号开头的名称 (“.”)，ID selector 是一个以 开头的名称哈希字符 (“#”).

所以你的类名声明错误。

.packagesmenu {
    box-shadow: none!important;
    background: transparent!important;
    background-color: transparent!important;
    padding: 8px 5px!important;
    border-top: 1px solid #AAA!important;
    border-left: 1px solid #AAA!important;
    border-right: 1px solid #AAA!important;
    border-bottom: 1px solid #AAA!important;
    max-width: 100%!important;
    outline: none;
    border-radius: 0;
    margin-bottom:15px!important;
    text-transform:none!important;
}

.packagesmenu:focus {
    box-shadow: 0 0 5px 0 #ee2b30!important;
    border-top: 1px solid #ee2b30!important ;
    border-left: 1px solid #ee2b30!important;
    border-right: 1px solid #ee2b30!important;
    border-bottom: 1px solid #ee2b30!important;
}

【讨论】：