我正在尝试为AutoComplete中的部分设置样式,但我不知道要在CSS 中放置部分。我特意想做:
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
任何建议???
答案 0 :(得分:78)
您在寻找这个选择器吗?:
.ui-menu .ui-menu-item a{
background:red;
height:10px;
font-size:8px;
}
丑陋的演示:
只需替换您的代码:
.ui-menu .ui-menu-item a{
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
}
答案 1 :(得分:56)
jQuery UI自动完成的引导样式
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}
答案 2 :(得分:0)
基于@ md-nazrul-islam的回复,这就是我对SCSS做的事情:
ul.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
//@include border-radius(5px);
@include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );
@include background-clip(padding-box);
*border-right-width: 2px;
*border-bottom-width: 2px;
li.ui-menu-item{
padding:0 .5em;
line-height:2em;
font-size:.8em;
&.ui-state-focus{
background: #F7F7F7;
}
}
}
答案 3 :(得分:-4)
您可以使用!important覆盖您自己的CSS中的类,例如如果你想摆脱圆角。
.ui-corner-all
{
border-radius: 0px !important;
}