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 select only one child element in CSS?

    How to exclude the container from this javascript code?

    IE11 shows every display: table-cell element at a new line

    How to achive this design CSS

    Showing Div via CSS selector within a UL

    How to style DOM element with CSS that was created with JavaScript function

    How do I apply a border around a checkbox when checked?

    How to make a simple plus one voting system in code igniter

    How to change CSS portrait to landscape in iphone?

    How to show hidden button with css media query?

    How can we wrap the line based on border size of windows browser?

    How to reference a Div after each h3

    How can I center an image with text that follows it using CSS?

    How to make the underlines the same size in all browsers with css?

    How can I simplify this JavaScript code

    How to have a multiline CSS horizontal scroll?

    How do I place text to the right of a relatively positioned image?

    How can i setup multiple sites within a single ASP.Net project?

    How to move/position DIV container by changing CSS values using Javascript?

    How to make this CSS layout

    How to use div to emulate border for