campos planos en formularios html

[nicokne]

hola a todos...
mi duda es la siguiente: cuando creo un formulario html los campos de texto y demás campos tienen una sombra por defecto, generada por una linea gruesa en el lateral izquierdo y una en la parte superior . lo que quiero saber es como quitarsela para que me quede un campo totalmente limpio. si alguien sabe agradecería la respuesta y gracias desde ya

[ryugen]

no se bien a lo que te estas refiriendo o en que navegadores. pero probaste aplicando en css lo siguiente:

Código CSS:

input{ border:0;}
 

[nicokne]

gracias por responder
ya probé input{ border:0;} y no funciona como lo necesito
las pruebas las hice con los exploradores mas conocidos: firefox, chrome, explorer y opera

exactamente lo que necesito es que los campos de entrada (por ejemplo el input tipo text) el borde de los mismos sean los cuatro del mismo grosor (es decir finos) y no que el borde izquierdo y el superior sean mas gruesos para simular sombra como sucede de forma predeterminada

[ryugen]

Entonces lo que tienes que hacer es darle la propiedad de borde que tu quieras.
Por ejemplo el input de google.com es:

Código CSS:

input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"] {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #C0C0C0 #D9D9D9 #D9D9D9;
    border-radius: 1px 1px 1px 1px;
    border-right: 1px solid #D9D9D9;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 29px;
    margin: 0;
    padding: 0 8px;
}
 

[pinguisport85]

Con que sofware trabajas?
Aplica css a las etiquetas ya sea una class o por selección, o aplica css a los atributos.

[pinguisport85]

si detallas mas te podria ayudar mas.
por ejemplo si es un formulario, aplica una class a la etiqueta form.
ojo siempre trabaja los css en un documento css externo, se hace mas fácil aplicar los css.

[ArturoGallegos]

Iniciado por ryugen

Entonces lo que tienes que hacer es darle la propiedad de borde que tu quieras.
Por ejemplo el input de google.com es:

Código CSS:

input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"] {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #C0C0C0 #D9D9D9 #D9D9D9;
    border-radius: 1px 1px 1px 1px;
    border-right: 1px solid #D9D9D9;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 29px;
    margin: 0;
    padding: 0 8px;
}
 

Aunque tienes razón al decir que tiene que indicar el tipo de borde que quiere... vale aclarar que

input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"]

son propias de CSS3 y HTML5 no funciona en navegadores viejos, es mas recomendable utilizar una clase o solo input[type="text"],textarea{...}

y para no utilizar un código tan extenso yo pondría solo:

Código CSS:

input[type="text"],textarea{border:1px #ccc solid;}
 

[nicokne]

Iniciado por ryugen

Entonces lo que tienes que hacer es darle la propiedad de borde que tu quieras.
Por ejemplo el input de google.com es:

Código CSS:

input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"] {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #C0C0C0 #D9D9D9 #D9D9D9;
    border-radius: 1px 1px 1px 1px;
    border-right: 1px solid #D9D9D9;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 29px;
    margin: 0;
    padding: 0 8px;
}
 

funcionó. justo lo que necesitaba. gracias

[nicokne]

Iniciado por pinguisport85

Con que sofware trabajas?
Aplica css a las etiquetas ya sea una class o por selección, o aplica css a los atributos.

uso solo el notepad de windows xp

[nicokne]

Iniciado por pinguisport85

si detallas mas te podria ayudar mas.
por ejemplo si es un formulario, aplica una class a la etiqueta form.
ojo siempre trabaja los css en un documento css externo, se hace mas fácil aplicar los css.

ok gracias