如何仅将轮廓应用于自定义样式的HTML选择元素的扩展可单击元素？

Question

方案

我想在可点击的选择下拉菜单的展开部分框中创建一个红色轮廓，用户点击该框以展开和HTML选择元素。

在自定义样式选择（使用jquery-selectbox.js创建）上应用元素时，轮廓围绕整个元素和下拉列表（当我单击以展开时）。

问题

如何只获得扩展盒周围的轮廓？

库

https://github.com/olivM/jQuery-Selectbox

CSS

.error-center{
  outline: solid 1px red !important;
  position: relative;
  background-color: #eeeeee !important;
  background-size: 15px 15px !important;
  padding-left: 30px !important;
  border-radius: 0px;
}

JS

$('#shippingState + .sbHolder').addClass('error-center');

小提琴

https://jsfiddle.net/Lwxfhkyf/

$(".state").selectbox();

$('#shippingState + .sbHolder .sbOptions a').click(function(elem) {
  $('#shippingState').val($(this).text());
});

$('#shippingState + .sbHolder').addClass('error-center');

@CHARSET "UTF-8";
 .error-center {
  outline: solid 1px red !important;
  position: relative;
  background-color: #eeeeee !important;
  background-size: 15px 15px !important;
  padding-left: 30px !important;
  border-radius: 0px;
}
.sbHolder {
  background-color: #F0F0F0;
  border: solid 3px #CFCFCF;
  /*font-family: Arial, sans-serif;*/
  font-size: 12px;
  font-weight: normal;
  height: 35px;
  position: relative;
  width: 60px !important;
  margin-bottom: 5px !important;
  font-weight: normal !important;
}
.sbSelector {
  display: block;
  height: 30px;
  left: 0;
  line-height: 30px;
  outline: none;
  overflow: hidden;
  position: absolute;
  text-indent: 10px;
  top: 0;
  width: 60px;
}
.sbSelector:link,
.sbSelector:visited,
.sbSelector:hover {
  color: #555555;
  outline: none;
  text-decoration: none;
}
.sbOptions li:hover {
  background-color: #CCCCCC;
}
.sbToggle {
  margin-top: 11px;
  display: block;
  height: 21px;
  outline: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 25px;
  font-weight: normal;
}
.sbToggle:hover {
  /*background: url(../img/select-icons.png) 0 -167px no-repeat;*/
}
.sbToggleOpen {
  margin-top: 11px;
  width: 25px;
  font-weight: normal;
}
/*.sbToggleOpen:hover{
	background: url(../img/select-icons.png) 0 -66px no-repeat;
}*/

.sbHolderDisabled {
  background-color: #3C3C3C;
  border: solid 1px #515151;
}
.sbHolderDisabled .sbHolder {} .sbHolderDisabled .sbToggle {} .sbOptions {
  background-color: #F0F0F0;
  border: solid 3px #CFCFCF;
  list-style: none;
  left: -3px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 30px;
  width: 91px;
  z-index: 1;
  max-height: 175px !important;
  overflow-y: auto;
}
.sbOptions li {
  padding: 0 7px;
}
.sbOptions a {
  border-bottom: solid 3px #cfcfcf;
  display: block;
  outline: none;
  margin-top: -3px;
  margin-bottom: -3px;
  padding: 7px 0 7px 3px;
  font-weight: normal !important;
}
.sbOptions a:link,
.sbOptions a:visited {
  font-weight: normal;
  text-decoration: none;
}
.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions a.sbFocus {
  font-weight: normal;
  text-decoration: none !important;
}
.sbOptions li.last a {
  border-bottom: none;
}
.sbOptions .sbDisabled {
  border-bottom: dotted 1px #515151;
  color: #999;
  display: block;
  padding: 7px 0 7px 3px;
}
.sbOptions .sbGroup {
  border-bottom: dotted 1px #515151;
  color: #EBB52D;
  display: block;
  /*font-weight: bold;*/
  padding: 7px 0 7px 3px;
}
.sbOptions .sbSub {
  padding-left: 17px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/olivM/jQuery-Selectbox/master/jquery-selectbox.js"></script>
Click the box to expand

<select name="state" id="shippingState" class="state form-control" size="1">
  <option value="" selected></option>
  <option value="AK">AK</option>
  <option value="AL">AL</option>
  <option value="AR">AR</option>
  <option value="AZ">AZ</option>
  <option value="CA">CA</option>
  <option value="CO">CO</option>
  <option value="CT">CT</option>
  <option value="DC">DC</option>
  <option value="DE">DE</option>
  <option value="FL">FL</option>
  <option value="GA">GA</option>
  <option value="HI">HI</option>
  <option value="IA">IA</option>
  <option value="ID">ID</option>
  <option value="IL">IL</option>
  <option value="IN">IN</option>
  <option value="KS">KS</option>
  <option value="KY">KY</option>
  <option value="LA">LA</option>
  <option value="MA">MA</option>
  <option value="MD">MD</option>
  <option value="ME">ME</option>
  <option value="MI">MI</option>
  <option value="MN">MN</option>
  <option value="MO">MO</option>
  <option value="MS">MS</option>
  <option value="MT">MT</option>
  <option value="NC">NC</option>
  <option value="ND">ND</option>
  <option value="NE">NE</option>
  <option value="NH">NH</option>
  <option value="NJ">NJ</option>
  <option value="NM">NM</option>
  <option value="NV">NV</option>
  <option value="NY">NY</option>
  <option value="OH">OH</option>
  <option value="OK">OK</option>
  <option value="OR">OR</option>
  <option value="PA">PA</option>
  <option value="RI">RI</option>
  <option value="SC">SC</option>
  <option value="SD">SD</option>
  <option value="TN">TN</option>
  <option value="TX">TX</option>
  <option value="UT">UT</option>
  <option value="VA">VA</option>
  <option value="VT">VT</option>
  <option value="WA">WA</option>
  <option value="WI">WI</option>
  <option value="WV">WV</option>
  <option value="WY">WY</option>
</select>

Answer 1

通过对我的JS和CSS的以下修改，我在初始框周围创建了div，并在选项无序列表周围创建了一个div。

我在第一个包装div上创建了一个大纲，这解决了我的问题。

下面的CSS，JS和小提琴。

CSS代码段

.selectDiv {
    height: 40px;
    width: 66px;
    left: -3px;
    margin-right: 0px;
    margin-top: 0px;
    top: -3px;
    z-index: 1000;
}

.error-center{
  outline: solid 1px red !important;
  position: relative;
  background-size: 15px 15px !important;
  padding-left: 30px !important;
  border-radius: 0px;
}

<强> JS

$(".state").selectbox();

$(".sbOptions").wrap("<div class='optionsDiv'></div>");
    $(".sbToggle, .sbSelector").wrapAll("<div class='selectDiv'></div>");


$('#shippingState + .sbHolder > .selectDiv').addClass('error-center');
$('#shippingState + .sbHolder > .optionsDiv a').click(function(elem){
  $('#shippingState').val($(this).text());
});

https://jsfiddle.net/6f2cs6db/