estilo del texto de entrada CSS

Estoy tratando de crear un texto de entrada como la siguiente imagen:
enter image description here
Primero utiliza CSS3 con algo de ayuda como this violín. debido a problemas con navegadores antiguos que llegué para no usar CSS3. Ahora codificado como esto:estilo del texto de entrada CSS

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
     background-image: url('Pictures/Input-BG.png'); 
    background-repeat: repeat-x; 

} 
    <input id="txtScrictAddress" value="Your Adress (required)" type="text" />

de entrada-BG.png es esta imagen:
enter image description here
y here es el resultado.

¿Corté la imagen de entrada, derecha?
La entrada tiene un color de borde izquierdo, ¿cómo se debe aplicar estilo a la entrada en css como la imagen?

Fuente

2011-08-23 Shahin

La imagen es buena, añadir 'border: 0;' para desactivar el estilo de borde predeterminado. – Kapep

@Kapap Gracias, ¿qué hay de la sombra en el lado izquierdo de Input? – Shahin

Solo tiene que establecer un radio de borde y borde a ninguno. Y edite su imagen para que lo oscuro también esté en el lado izquierdo.

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
    background-image: url('http://i.stack.imgur.com/pbpVI.png'); 
    background-repeat: repeat-x; 
    border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/ 

    border: 0; 
}

http://jsfiddle.net/TGzng/8/

Fuente

2011-08-23 06:23:07 Kyle

Gracias. Parece mejor que mi código, pero creo que todavía su muestra tiene una pequeña diferencia con la imagen que he puesto. Me refiero a la pequeña sombra a la izquierda de Input. – Shahin

Utilicé la imagen que proporcionó, la imagen debe editarse para incluir la parte izquierda de la sombra. – Kyle

si desea utilizar imágenes para obtener algo donde ambos extremos difieren, al menos necesitará 2 imágenes para obtenerlo. Intenta buscar "sliding doors input css". tal vez this topic on SO te ayude (pero hay un millón de ejemplos más en in the web y en Stackoverflow).

Fuente

2011-08-23 06:20:41 oezi

Gracias. Entonces querías decir que debería usar dos imágenes, una para la izquierda y otra para el fondo, ¿verdad? – Shahin

Debe agregar un radio de borde para redondear los bordes. Sin embargo, esto no funcionará antes de IE8.

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
     background-image: url('http://i.stack.imgur.com/pbpVI.png'); 
    background-repeat: repeat-x; 
    border:1px solid #777; 
    border-radius:5px 
}

En cuanto a la imagen de rebanado, manera fácil de obtener la parte izquierda sombra significa que necesita tener una imagen muy amplia para el fondo. O haz las puertas correderas que sugirió la otra persona.

Fuente

2011-08-23 06:22:52 jzm

estilo del texto de entrada CSS

Respuesta

Cuestiones relacionadas