How do I apply an outline to a custom styled HTML selection element's expansion clickable element only?


Tags: jquery,html,css

Problem :

Scenario

I want to create a red outline on a clickable selection dropdown's expand portion box, where the user clicks to expand and HTML select element.

When applying an element on the custom styled selection (created using jquery-selectbox.js) the outline goes around the entire element and the drop down list as well (when I click to expand).

Question

How do I get the outline around the expansion box only?

Library

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');

Fiddle

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>



Solution :

With the following modifications to my JS and CSS, I created div around the initial box and a div around the options unordered list.

I created an outline on the first wrapper div and that fixed my issue.

CSS, JS, and fiddle below.

CSS Snippet

.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/


    CSS Howto..

    How to make a generic struct to contain any CSS properties' values

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    How to prevent blur from CSS transform?

    How to use CSS to place text on different sizes of images?

    How to do margin: 0 auto 0 auto minus a few pixels with CSS?

    CSS - How to select nth-child of form element?

    How does one target IE7 and IE8 with valid CSS?

    CSS animation - How to fill in “starting from border”?

    HTML4 strict: border=“0” is deprecated, how to replace it

    How to change CSS to the same class but another input name

    How to make a tetrahedron?

    Styling Tables - How to use column groups to modify TH tag located in that column

    How do I get an infinite vertically scrolling image in CSS?

    How do I center my content inside the menu?

    How can I center my text on top of an image, given that it's responsive?

    How to refer to third level lists in css?

    CSS - How can I set the content to attr() but when attribute isn't available, set it to 0 or another?

    How do I make a CSS triangle with smooth edges?

    How do you extend a Django project root HTML file in project apps?

    How to change the text my button displays?

    Issue with changing how containers look based on values in an MD array

    How do I customise the style of the Auth0 lock control?

    How to add css to jquery backstretch?

    CSS - How to center an image without class or id?

    How to add CSS to page to the bottom of the custom chrome extension

    Should be easy jQuery loop, but can't seem to figure out how to cycle through this

    How do I add line-height to a