css en un select

jspcat · #1 (**permalink**) 23/04/2012, 03:11

Hola,

Alguien sabe como poner un css degradado en un select

por ejemplo este

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E6E6E6), to(#BDBDBD), color-stop(.6,#999999))

Gracias

Saludos

YYs86 · #2 (**permalink**) 23/04/2012, 03:17

Por ejemplo:

select {

background-image: -ms-linear-gradient(bottom, rgb(160,244,140) 17%, rgb(192,255,168) 59%);

}

jspcat · #3 (**permalink**) 23/04/2012, 03:23

No me lo coge, al menos en chrome, me sale la propiedad tachada...

YYs86 · #4 (**permalink**) 23/04/2012, 03:26

Y como también?:

Código CSS:

Ver originalselect {
 
background: -ms-linear-gradient(bottom, rgb(160,244,140) 17%, rgb(192,255,168) 59%);
 
}

En esta página lo testean y les sale bien: [URL="http://stackoverflow.com/questions/7066466/gradient-style-for-select-tag"]http://stackoverflow.com/questions/7066466/gradient-style-for-select-tag[/URL]

jspcat · #5 (**permalink**) 23/04/2012, 03:48

Gracias por las respuestas pero sigue sin salir. Os pongo los codigos.
test.php

Código PHP:

  <Html> 
    <head> 
        <link rel="stylesheet" href="all.css" type="text/css" /> 
    </head> 
     
    <body> 
 
        <select class="degradado"> 
            <option value=1>OPCION UNO DE PRUEBA</option> 
            <option value=2>OPCION DOS DE PRUEBA</option> 
        </select> 
    </body> 
</html>

all.css

Código:

.degradado{

	margin: 3px 0 0 0;
    padding: 6px; 
    width: 260px; 
    font-family: arial, sans-serif; 
    font-size: 12px; 
    border: 1px solid #ccc;
    background: -webkit-gradient(linear, left top, left 15, from(#E6E6E6), color-stop(4%, #BDBDBD), to(#999));
    background: -moz-linear-gradient(top, #E6E6E6, #f4f4f4 1px, #999 15px);
}
.degradado2{
	background: -ms-linear-gradient(bottom, rgb(160,244,140) 17%, rgb(192,255,168) 59%);

}

Sin embargo el resultado es con el fondo blanco

Alguna idea??

Gracias

YYs86 · #6 (**permalink**) 23/04/2012, 04:35

Looking 4 u on google and i found this:

[URL="http://jsfiddle.net/thirtydot/DCjYA/361/"]Css para el noob :D[/URL]

furoya · #7 (**permalink**) 23/04/2012, 11:06

Disculpa jspcat, ¿lo quieres sólo para safari / Chrome?. Digo, por lo de

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E6E6E6), to(#BDBDBD), color-stop(.6,#999999))

Y lo tuyo, YYs86, ¿es una broma?

background-image: -ms-linear-gradient(bottom, rgb(160,244,140) 17%, rgb(192,255,168) 59%);

¡Por supuesto que no va a funcionar fuera del IE!

Ya que estoy, dejo un ejemplo que se resuelve por otro lado

Código:

<select>
<option style="background:#f00">._._._._. </option>
<option style="background:#f10">._._._._. </option>
<option style="background:#f20">._._._._. </option>
<option style="background:#f30">._._._._. </option>
<option style="background:#f40">._._._._. </option>
<option style="background:#f50">._._._._. </option>
<option style="background:#f60">._._._._. </option>
<option style="background:#f70">._._._._. </option>
<option style="background:#f80">._._._._. </option>
<option style="background:#f90">._._._._. </option>
<option style="background:#fa0">._._._._. </option>
<option style="background:#fb0">._._._._. </option>
<option style="background:#fc0">._._._._. </option>
<option style="background:#fd0">._._._._. </option>
<option style="background:#fe0">._._._._. </option>
<option style="background:#ff0">._._._._. </option>
</select>

Porque doy por descontado que el degradado es para la tira de opciones, aunque no lo mencionen.