no logro quitar box-shadow:inset; de input

[guardarmicorreo]

He creado una hoja de estilos css3, con un reset css3 para los navegadores y poner mi estilo. Luego dentro de ese mismo documento he creado una clase para dar forma y tamaño a las cajas de input type text.

El problema es que al darles forma y tamaño a las cajas les sale una sombra interior que no he establecido ni quiero.

Este es el código del css, al principio está el reset para navegadores, al final está la clase para el input type text

Código CSS:

@charset "utf-8";
/* CSS Document */
 
/*
 
ANULA TODO EL CSS3 POR DEFECTO DE LOS NAVEGADORES 
 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
 }
body {
 line-height: 1;
 }
ol, ul {
 list-style: none;
 }
blockquote, q {
 quotes: none;
 }
blockquote:before, blockquote:after, q:before, q:after {
 content: '';
 content: none;
 }
<em>/* No olvides definir estilos para focus */</em>
 :focus {
 outline: 0;
 }
<em>/* No olvides resaltar de alguna manera el texto insertado/borrado */</em>
ins {
 text-decoration: none;
 }
 del {
 text-decoration: line-through;
 }
<em>/* En el código HTML es necesario añadir cellspacing="0" */</em>
 table {
 border-collapse: collapse;
 border-spacing: 0;
 }
 
/*
 
DA FORMA Y TAMAÑO A LOS INPUT TYPE TEXT DE LOGIN 
 
*/
 
input.texto{
    width:109px;
    height:9px;
    box-shadow:none; /* SE SUPONE QUE SUPRIME TODA SOMBRA, PERO NO LO HACE*/
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px; 
}
 

esta es la imagen del resultado con ese código



¿Alguien sabe cómo solucionarlo?

Gracias!!

[ArturoGallegos]

especifica el borde, por ejemplo

Código CSS:

input.texto{border:1px #ccc solid;}
 

[pzin]

En vez de anular la sombra, deberías de ver de dónde viene. Usa las herramientas de desarrollo que tienen los navegadores para ver en qué lugar del CSS está especificado el estilo.

Por otro lado deberías de quitar el código HTML que tienes en el CSS, o al menos comentarlo —<em>.

[ArturoGallegos]

Esa sombra no viene de ningún lado, es el comportamiento normal del navegador al aplicarse border-radius sin haber declarado antes el borde.... haz la prueba en un documento limpio, que contenga unicamente un input y aplicale border-radius.

La solución que he encontrado es declarar

Código CSS:

input{border:....;}
 

[pzin]

Qué curioso, no sabía eso.

Entonces poner el borde a cero/none, o especificarlo como dice ag6... ArturoGallegos.

[guardarmicorreo]

WOW!! muchas gracias. teniais razón, al no especificar border directamente te asigna sombras para que asegurar que el input se siga viendo. por un lado lo veo bien, por otro no.

muchísimas gracias de nuevo.