Trouble Converting ul Dropdown to a Select DropDown - html

Question

I have a jsfiddle with a dropdown list using ul and li (jsfiddle). When trying to convert this to a select options drop down list I am not getting the same options([jsfiddle])2.
I'm guessing it has to do with the way I renamed some one the CSS (I just replaced li with option) but I'm not sure what is wrong with it. My current HTML and CSS are below and two jsfiddles are in the text up top.
HTML
<div class="dd wrapper-dropdown-3" tabindex="1">
<select id="Process" class="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>
</div>
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;
top: 100%;
left: 0;
right: 0;
/* Styles */
background: white;
border-radius: inherit;
border: 1px 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: 0;
pointer-events: none;
/*Gets rid of the padding where the bullets would be*/
padding-left:0;
}
.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 need to do a couple of things to fix your problem. All of these are inside your .wrapper-dropdown-3 .dropdown styling. First, remove pointer-events: none as #ramesh mentioned. Then change your top: 100%; to top: 0;. Add width: 100%;. Change opacity: 0; to opacity: 1; so that you can see it. Remove your border, selects already have a border. And lastly, add the following to remove the default dropdown arrow from Firefox:
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
Here is an updated JSFiddle.

Answer 2

pointer-events: none; was causing the issue. Replace the following class with the css provided:
.wrapper-dropdown-3 .dropdown {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
background: white;
border-radius: inherit;
border: 1px solid rgba(0, 0, 0, 0.17);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-weight: normal;
list-style: none;
opacity: 0;
padding-left: 0;
}
Not sure why you had a pointer-event there, because it kind of doesn't allow you to interact with the element.