4

Deseo cambiar la apariencia de la caja que contiene las opciones de un select, uso el selector de la etiqueta option, para modificar las opciones, y a pesar que si hace cambio sobre las opciones del select, este sigue estando contenido en una caja con un borde desagradable y sin gracia, como puedo modificar a través de los estilo css esta caja que contiene a las opciones?

option{
        background:red;
    }
<select>
  <option>opcion 1</option>
  <option>opcion 2</option>
  <option>opcion 3</option>
</select>

Así se ve en chrome  70.0.3538.110

Esto me modifica el color de fondo de las opciones del select a color rojo, pero no logro modificar el borde feo que contiene y rodea el conjunto de opciones

5
  • 1
    ¿A que te refieres con "el borde feo que contiene"? Commented el 30 may. 2017 a las 17:29
  • 2
    Como ya se ha mencionado en otras preguntas anteriores, no existe un método estándar que funcione en todos los navegadores solo con css. Aparte de eso, deberías añadir más información a tu pregunta: qué código llevas y cuál es el resultado esperado (quitarle el "borde desagradable y sin gracia" no es una descripción válida de lo que quieres conseguir)
    – Alvaro Montoro
    Commented el 30 may. 2017 a las 18:59
  • 1
    Yo también me sumo a la pregunta, lo que el usuario quiere es que el borde que sale en la caja de opciones de un select se pueda borrar, Cuando tienes un select con n opciones, al desplegar estás opciones sale un cuadro que rodea las opciones (Ver imagen i.sstatic.net/0Ae9U.jpg) Commented el 7 nov. 2018 a las 16:13
  • 1
    Me encontré con este mismo inconveniente, al parecer no es posible. para quienes no entendieron, lo que al parecer quería el compañero es cambiar los estilos de los option que aparecen al desplegar el select, por ejemplo al pasar el mouse por un option el background cambia a un azul no muy agradable, y lo del borde quizás es el borde punteado alrededor del texto que aparece al estar en focus el select (Este comportamiento es en Firefox) Commented el 8 dic. 2018 a las 22:30
  • 2
    Dios mio cómo es posible que no se entienda lo que dice? Es que no véis que todos los ejemplos dados tienen algo en comun?? Una lista de opciones absolutamente horrenda. A parte del botón, que todos sabemos cómo estilizarlo, cuando hacemos click en él, aparecen las opciones. La caja que contiene esas opciones tiene un borde azul y cuando haces hover en cada uno de los "options" tiene un background también azul. Eso cómo se cambia? Se puede? Gracias! ![Captura de las cajas del select](i.sstatic.net/GZ5Y0.png) Commented el 15 jul. 2019 a las 15:11

4 respuestas 4

7

Lo que quieres lograr no es posible hacerlo con css, sin embargo aquí te propongo una solución alternativa que te deja aplicar el estilo que quieras a tus opciones sin usar <select> ni <option>, solamente usando un <div> para el select, y varias <ul> para los 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>

Y si lo que quieres es que te aparezca todo sin borde como aclaraste anteriormente en un comentario, simplemente quitas la propiedad border del ejemplo que te puse quedándote así:

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>

Luego haces lo que sigue con JQuery o con Javascript para captar el elemento seleccionado y listo. Espero que te ayude.

2

Puedes incluir el select dentro de un div y ponerle una clase al div y luego en css

.styled-select select {
    // tus estilos 
}

Echa un vistazo aquí para ver varios ejemplos

2

No sé exactamente a lo que te refieres.

Las posibilidades son infinitas, usando solamente HTML/CSS.

Mira estos ejemplos tomados de 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>

5
  • 1
    Gracias pero no es lo que quiero, si vemos en los ejemplos, los estilos del Select y de las opciones cambian, pero el cuadro que la contiene no cambia, quisiera por lo menos que el borde de la caja desaparezca. Commented el 30 may. 2017 a las 15:02
  • 2
    No sé a qué te refieres con el borde de la caja. Si te refieres a los bordes del select, podrás ver que hay varios ejemplos sin borde. Puse el código con la intención de que te sirva de inspiración para crear tu propio estilo.
    – A. Cedano
    Commented el 30 may. 2017 a las 15:06
  • 1
    Si miras los ejemplos cuando se despliegan las opciones, estan contenidas dentro de una caja, dicha caja tiene un borde que deseo quitar, como lo hago? Commented el 30 may. 2017 a las 15:58
  • 1
    Te sugiero que edites tu pregunta y añadas el código html tal y como lo tienes para que podamos entender a que te refieres con "el borde de la caja". Si el select está dentro de un div, el cual muestra el borde, lo único que tienes que hacer es modificar el css de dicho div para quitarle el borde, pero si no vemos el código no podremos entender como lo tienes Commented el 30 may. 2017 a las 15:59
  • 2
    @DanielEnriqueRodriguezCaste en los ejemplos de esta respuesta se muestran las opciones sin borde. ¿No era eso lo que querías?
    – A. Cedano
    Commented el 31 may. 2017 a las 14:48
0

Para poder aplicar estilos CSS a un option debe o bien pertenecer a un datalist o, si hablamos de un select, contener los atributos multiple o size. Lamentablemente, en ese caso deja de ser un dropdown. Pero no está todo perdido.

Podéis ver algunos expermientos realizados con bastante éxito en HTML Option – experimentos CSS. En él se aplican algunas técnicas que no tenían buen soporte aún en el momento de publicar esta pregunta, con las que logra devolver la interacción de dropdown a un select con size. La diferencia principal con soluciones anteriores es que respeta el árbol de accesibilidad de select:

<select id="mySelect" tabindex="1" value=0 size=2>
  <option disabled>-- Selecciona una opción --</option>
  <optgroup>
    <option label="Opción 1" value="1"></option>
    <option label="Opción 2" value="2"></option>
    <option label="Opción 3" value="3"></option>
    <option label="Opción 4" value="4"></option>
  </optgroup>
</select>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.