Change the style of the drop down list in HTML

Question

I have created the following drop down list using the

<select></select>

tags . The code that i used is :

<html>
<body>
<select name="ans" >
<option> select 1</option>
<option> select 2</option>
</select>
</body>
</html>

Is their a way i can change the style of the list , like the drop down arrow or the text in it .

You can style is a little bit, but from my experience they are quite hard to style, i think some people use javascript to do it — iConnor, Feb 12 '13 at 08:18
I'd recommened on using a plugin called jQuery Chosen, enables a better select box and comes with a css that's easily controlled. — eric.itzhak, Feb 12 '13 at 08:18
http://stackoverflow.com/questions/14434645/remove-the-button-inside-the-dropdownlist/14434688#14434688 — Tim M., Feb 12 '13 at 08:50

Roland Jee · Accepted Answer · 2013-02-12T09:08:17.610

If you want to style the Dropdown-Button you can come up with following approach. The idea is to hide the original select by lowering it's opacity to 0, but still keep its functionality. We also need a little bit JS for this (just a little bit), to change the Text-value when you change the options-value in the select.

The CSS:

.selectWrap {
  /* Style your own select-box here */
  background: #ddd;
  border: 1px solid black;
  color: #333;

  /* Your new Arrow */
  /* Created with the after-pseudo-element to save Markup,
     Styled the arrow with help of the border-trick to provide Retina-ready arrow */
  &:after {
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    content: "";
    right: 20px;
    position: absolute;
    top: 20px;
  }

  height: 30px;
  position:relative;
}


/* Hide the original select */
select {
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;

  /* Hide the select cross-browser */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0.0;
  -khtml-opacity: 0.0;
  opacity: 0.0;
}

The HTML:

<div class="selectWrap">
  <select>
    <option>one</option>
    <option>two</option>
  </select>

  <div class="selectText">Please choose..</div>
</div>

The JavaScript (jQuery):

/* Always when the option in the select is changed, change the text of our selectWrap */
$(document).ready(function () {
  $('.selectWrap select').on('change', function (e) {
     var wrap = $(e.target).parents('.selectWrap');
     wrap.find('.selectedText').html(this.options[this.selectedIndex].innerHTML);
  });
});

Change the style of the drop down list in HTML

1 Answers1