正在添加要选择标记的类

我正试图将一个类添加到select标记中，这样下拉菜单就可以继承一些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>

在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;
}

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

在css中声明：

元素bodyselect使用标记
类.someclass使用点和类名
id#bigid使用散列和id名称

没有空格。但在CCD_ 10和CCD_。现在允许没有空格，但良好的实践、可读性和传统都是严格的空格！

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>

相关内容

最新更新

热门标签：