css - 添加类以选择标签
问题描述
我正在尝试向选择标签添加一个类,以便下拉菜单可以继承一些 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。内联css也是。不要使用内联样式——这很糟糕而且很难维护,有一天你会发现,现在请相信我。不要使用!importand
,这是不好的做法,只是不要。
在 CSS 中声明:
- 元素
body
select
使用标签 - 一个类
.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>
推荐阅读
- flutter - FloatingActionButton onPressed 未触发
- c - 读取键值对的 fscanf 问题
- python - 使用一个 glob.glob 而不是多个 glob.glob
- sql - 根据列中的日期值排除日期
- android - TextView:删除顶部和底部的间距和填充
- python - 是否可以使用 numpy 计算递归数据
- web - 将旧的 http 单页重定向到全新的 https 域的正确方法是什么?
- python - Django 2.1.4 注册表+登录页面
- django - Docusign API:标签错误地应用于其他文档和字段
- c# - 如何在 Unity 的固定对撞机数组中随机实例化预制件?