2010-06-28 40 views

Respuesta

19

En tu CSS:

input[type=text] { 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid #000000; 
} 

Desde aquí se puede jugar con el acolchado para ubicar la entrada de texto real donde le gustaría. Por ejemplo, tener la línea se extiende 5 píxeles a cada lado de la zona de entrada real:

padding: 2px 5px; 
+1

Sin embargo, probablemente debería utilizar una clase en lugar del selector de atributos para acomodar navegadores antiguos. – Joey

+3

Esto funcionará en IE7 +, FF2 +, Chrome, etc. Sin embargo, si se necesita compatibilidad con IE6, se recomienda definitivamente una clase o algún otro método. –

+0

Es posible que también desee agregar 'outline: none' para que no vea un contorno cuando los campos se enfocan. – Beau

2

si quieres esto también en IE6 que se puede utilizar una imagen bg para esto con background-position

.

input{ 
    background:url(bg-dot.jpg) repeat-x center bottom; 
    border:none; 
    padding:2px 2px; 
} 

por lo que para todos los navegadores compatibles con ie6 debe usar esto.

+2

Creo que te refieres a 'background-position'. Además, IE6 está muerto. Por favor, déjalo así, por el amor a todo lo bueno en el mundo. –

+0

@ Matthew Scharley.oh sí, esto es la posición de fondo. y sobre ie6 .http: //www.w3schools.com/browsers/browsers_stats.asp usted encuentra que los usuarios de ie6 son más que safari y opera. Si nos preocupamos por ellos de lo que también debería importarnos ie6. –

+0

¿Qué pasa con esta respuesta? –

0

que desea mostrar sólo una parte inferior que es la razón por aplicar css de una manera tal que desactiva todas las otras tres partes ..

aplicar CSS como

border: 1px solid black; 
float: left; 
margin: 0; 
padding: 0; 
border-top: 0px; 
border-left: 0px; 
border-right: 0px; 

trabajos para todo

0
border: 1px solid black; 
float: left; 
margin: 0; 
padding: 0; 
border-top: 0px; 
border-left: 0px; 
border-right: 0px; 
Cuestiones relacionadas