como pintar media caja de un textarea

[ocodar]

Hola amigos hace poco que comencé en esto de la maquetación y me ha surgido una duda un tanto rara, tengo que hacer un loguin y lo quiero hacer al estilo caja, como lo que se usa ahora en Android, aquí un ejemplo:



En la imagen se ve arriba el resultado que quiero conseguir y abajo lo que he conseguido.

La pregunta es ¿se puede transformar lo de abajo en lo de arriba? y si es así ¿cómo?

Saludos y muchas gracias de antemano.

[ocodar]

alguien me puede echar un cable?

[Rafael]

Ni idea. No creo que se pueda. Tal vez con una imagen de fondo.

[C2am]

Tal vez con algunos agregados.
Supongo que será posible mejorar mi ejemplo, por ejemplo en vez del div aplicarlo a <legend>.
Trate aplicar el pseudoelemento :before directamente al input, pero no lo logre.

El ejemplo:
http://jsfiddle.net/c2am/mcgct/97/embedded/result/

Saludos

[pzin]

Iniciado por C2am

Trate aplicar el pseudoelemento :before directamente al input, pero no lo logre.

Los pseudo-elementos sólo pueden aplicarse a elementos con contenido. Básicamente los que tengan etiqueta de cierre, dicho en bruto.

No sé si tal vez se podrá hacer con un borde degradado/border-image.

[webosiris]

quizás de alguna forma los experimentos que mencionan C2am o pzin pueden funcionar (se podría incluir a los input dentro de otro elemento y ahí si utilizar los pseudo-elementos :after y :before), pero creo que por lejos lo más sencillo y directo (y como se ha hecho toa la vida, cuando no había tanto soporte para pseudo-elementos y novelerías varias ) es con una img de fondo

[faillure]

¿el border-radius sería una novelería?

Código CSS:

label {
  height: 25px;
  width: 150px;
  border: 3px solid #000;
  border-radius: 50% 50% 0 0;
  position: relative;
}
input {
  height: inherit;
  width: inherit;
  position: relative;
  top: -4px;
  border: 0 none;
  background: #fff;
}
 

Código HTML:

<label for='text'>
<input type="text" name="texto" id='text'>
</label>