Selection Options not Formatting - html

Question

I have some code that produces a Drop Down List using ul and li Here is the first jsfiddle. This is how I would like my drop downs to look. However when I try and convert them to a select and options drop down list I am receving the following format, current jsfiddle. All I did was replace the li in the first fiddle with option. Any ideas how to fix this or why it's doing this? It seems like it is ignoring everything I replaced
Current HTML
<select class="wrapper-dropdown-3 dropdown" name="Process" data-val-required="Required" dataval="true">
<option value="">--- Select One ---</option>
<option value="Extrusion">Extrusion</option>
<option value="Injection">Injection</option>
<option value="Secondary">Secondary</option>
<option value="Vinyl Dip Molding">Vinyl Dip Molding</option>
</select>
Current CSS
.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;
/* Styles */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
outline: none;
/* Font settings */
font-weight: bold;
color: #0000FF;
}
.wrapper-dropdown-3:after {
content:"";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
width: 100%;
height:100%;
top: 0;
left: 0;
right: 0;
/* Styles */
background: white;
border-radius: inherit;
border: 0px solid rgba(0, 0, 0, 0.17);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-weight: normal;
list-style: none;
/* Hiding */
opacity: 1;
/*Gets rid of the padding where the bullets would be*/
padding-left:0;
-moz-appearance: none;
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow:'';
}
.wrapper-dropdown-3 .dropdown option a {
display: block;
padding: 10px;
text-decoration: none;
color: #0000FF;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown option i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown option:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown option:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown option:hover a {
background: #f3f8f8;
}
.wrapper-dropdown-3 .dropdown:after {
content:"";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content:"";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}

Answer 1

You have specified a class name = "wrapper-dropdown-3 drop down" however there is no part of your CSS that styles this class. Also, you should pay attention to your HTML DOM structure when styling in CSS. For example in the code:
<ul class="ul">
<li class="li"></li>
</ul>
You would have a CSS like:
.ul{/*CSS code*/}
and
.ul .li{/*CSS code*/}
and not
.li{/*CSS code*/}
since the li tag is within the ui tag