How to change the css styles of a select options?

Question

How to change the css styles of a select options?

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (1 votes)

3

I want to change the appearance of the box that contains the options of a select , use the selector of the option tag, to modify the options, and although if you change the select options, it is still contained in a box with an unpleasant and ungraceful border, as I can modify through the style css this box that contains the options?

option{
        background:red;
    }

<select>
  <option>opcion 1</option>
  <option>opcion 2</option>
  <option>opcion 3</option>
</select>

This modifies the background color of the options of select to red color, but I can not modify the ugly border that contains and surrounds the set of options

html css scss

asked by Daniel Enrique Rodriguez Caste 30.05.2017 в 16:35

source

3 answers

How to change the text "It is safe" that comes out when your page has SSL C #: How to identify the first digit of each number in a vector to count how many numbers start the same?

score 4 · Answer 1

What you want to achieve is not possible to do with css, however here I propose an alternative solution that lets you apply the style you want to your options without using <select> or <option> , only using a <div> for the select, and several <ul> for the options.

div { 
      margin: 2em;
      padding: .5em;
      border: 2px solid #6bb99c;
      width: 12em;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 2px;
    }

    div > ul { display: none; list-style: none;}
    div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid 
    #6bb99c;}
    div:hover > ul > li { padding: 5px; border-bottom: 1px solid #6bb99c;}
    div:hover > ul > li:hover { background: white;}
    div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
	<li><a href="#">Primera opción</a></li>
	<li><a href="#">Segunda opción</a></li>
	<li><a href="#">Tercera opción</a></li>
  </ul>
</div>

And if what you want is to see everything without border as you clarified earlier in a comment, simply remove the border property of the example that I put you staying like this:

div { 
          margin: 2em;
          padding: .5em;
          width: 12em;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
        }

        div > ul { display: none; list-style: none;}
        div:hover > ul {display: block; border-top: 1px solid 
        white;}
        div:hover > ul > li { padding: 5px; border-bottom: 1px solid white;}
        div:hover > ul > li:hover { background: white;}

<div>
  Select
  <ul>
    <li><a href="#">Primera opción</a></li>
    <li><a href="#">Segunda opción</a></li>
    <li><a href="#">Tercera opción</a></li>
  </ul>
</div>

Then do the following with JQuery or with Javascript to capture the selected item and go. I hope it helps you.

score 1 · Answer 2

1

You can include the select inside a div and put a class to the div and then in css

.styled-select select {
    // tus estilos 
}

Take a look here to see several examples

answered by 30.05.2017 в 16:43

score 1 · Answer 3

I do not know exactly what you mean.

The possibilities are endless, using only HTML / CSS.

See these examples taken from Codepen .

/* -------------------- Page Styles (not required) */
div { margin: 20px; }

/* -------------------- Select Box Styles: bavotasan.com Method (with special adaptations by ericrasch.com) */
/* -------------------- Source: http://bavotasan.com/2011/style-select-box-using-only-css/ */
.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

.styled-select.slate {
   background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
   height: 34px;
   width: 240px;
}

.styled-select.slate select {
   border: 1px solid #ccc;
   font-size: 16px;
   height: 34px;
   width: 268px;
}

/* -------------------- Rounded Corners */
.rounded {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }
.green   { background-color: #779126; }
.blue    { background-color: #3b8ec2; }
.yellow  { background-color: #eec111; }
.black   { background-color: #000; }

/* -------------------- Colors: Text */
.slate select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #fff; }
.yellow select  { color: #000; }
.black select   { color: #fff; }


/* -------------------- Select Box Styles: danielneumann.com Method */
/* -------------------- Source: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/ */
#mainselection select {
   border: 0;
   color: #EEE;
   background: transparent;
   font-size: 20px;
   font-weight: bold;
   padding: 2px 10px;
   width: 378px;
   *width: 350px;
   *background: #58B14C;
   -webkit-appearance: none;
}

#mainselection {
   overflow:hidden;
   width:350px;
   -moz-border-radius: 9px 9px 9px 9px;
   -webkit-border-radius: 9px 9px 9px 9px;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 1px 1px 11px #330033;
   background: #58B14C url("http://i62.tinypic.com/15xvbd5.png") no-repeat scroll 319px center;
}


/* -------------------- Select Box Styles: stackoverflow.com Method */
/* -------------------- Source: http://stackoverflow.com/a/5809186 */
select#soflow, select#soflow-color {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

select#soflow-color {
   color: #fff;
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#779126, #779126 40%, #779126);
   background-color: #779126;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}

<!--
  ** Style a Select Box Using Only CSS
  ** Source: http://bavotasan.com/2011/style-select-box-using-only-css/
  ** Source: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/
  ** Source: http://stackoverflow.com/a/5809186
-->

<div>
  <select>
    <option>Here is the unstyled select box</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

<hr>

<div class="styled-select slate">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

<hr>

<div class="styled-select black rounded">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

<div class="styled-select green rounded">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

<div class="styled-select blue semi-square">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

<div class="styled-select yellow rounded">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

<hr>

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

<hr>

<select id="soflow">
  <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
  <option>Select an Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select id="soflow-color">
  <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
  <option>Select an Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>