样式化JQuery UI自动完成

小提琴

我试图设置自动完成内部的部分，但我不知道该放在CSS的部分。 我正在试图使：

color: #96f226; border-radius: 0px; border: 1px solid #454545; 

有什么build议么？？？

Answer 1

你在找这个select器吗？

 .ui-menu .ui-menu-item a{ background:red; height:10px; font-size:8px; } 

丑陋的演示：

http://jsfiddle.net/zeSTc/

只需replace您的代码：

 .ui-menu .ui-menu-item a{ color: #96f226; border-radius: 0px; border: 1px solid #454545; } 

演示： http : //jsfiddle.net/w5Dt2/

Answer 2

引导样式为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; } 

Answer 3

根据@ 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; } } } 

Answer 4

你可以使用！重要的，例如如果你想摆脱圆angular覆盖自己的CSS类。

 .ui-corner-all { border-radius: 0px !important; }