Foros del Web » Creando para Internet » CSS »

Problema muy sencillo, Estilo formulario textfiled.

Estas en el tema de Problema muy sencillo, Estilo formulario textfiled. en el foro de CSS en Foros del Web. Hola amigos, tengo problemas para conseguir éste estilo con un textfield y un enlace <a href Este es mi CSS @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver ...
  #1 (permalink)  
Antiguo 15/12/2010, 20:01
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Problema muy sencillo, Estilo formulario textfiled.

Hola amigos, tengo problemas para conseguir éste estilo con un textfield y un enlace <a href



Este es mi CSS


Código CSS:
Ver original
  1. .uno{
  2.     width:180px;
  3.     margin:0;
  4. }
  5. .uno input{
  6.     width:180px;
  7.     height:30px;
  8.     border-left:#999 solid 1px;
  9.     border-top:#999 solid 1px;
  10.     border-right: none;
  11.     border-bottom:#999 solid 1px;
  12.     margin:0;
  13. }
  14. .dos{
  15.     width:30px;
  16.     max-height:30px;
  17.     margin:-1em 0em 0em 0em;
  18.     border-left:#999 solid 1px;
  19.     border-top:#999 solid 1px;
  20.     border-right:#999 solid 1px;
  21.     border-bottom:#999 solid 1px;
  22. }
  23. .img{
  24.     padding:0em 0.0em 0.0em 0.0em;
  25.     margin:0em 0em 0em 0em;
  26.     text-decoration:none;
  27.     font-family:Verdana, Geneva, sans-serif;
  28.     font-size:14px;
  29.     color:#036;
  30.     font-weight:bold;
  31. }


Y este el HTML
Código HTML:
Ver original
  1. <span class="uno">
  2. <input type="text" class="" />
  3. </span>
  4.  
  5. <span class="dos">
  6. <a href="" class="img">Buscar</a>
  7. </span>



Resultado actual:



Resultado esperado:




Muchas gracias.
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #2 (permalink)  
Antiguo 16/12/2010, 07:33
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: Problema muy sencillo, Estilo formulario textfiled.

si se puede?
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #3 (permalink)  
Antiguo 16/12/2010, 08:43
Avatar de punk567  
Fecha de Ingreso: octubre-2006
Ubicación: Montevideo
Mensajes: 265
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: Problema muy sencillo, Estilo formulario textfiled.

Hola, intentá con este código

Esto funciona en FF, Ie 7 y 8, Chrome y Safari , en windows

El doctype es: XHTML 1.0 Transitional

Código:
.uno{
	height:30px;
	float:left;
    border-left:#999 solid 1px;
    border-top:#999 solid 1px;
    border-right: none;
    border-bottom:#999 solid 1px;
}
.uno input{
	border:none;
    margin:0;
	padding:6px 0 0;
	vertical-align:middle;
	height:24px
}
.dos{
    border-left:#999 solid 1px;
    border-top:#999 solid 1px;
    border-right:#999 solid 1px;
    border-bottom:#999 solid 1px;
	float:left;
	height:30px;
}
.img{
	margin:0;
    padding:0;
    text-decoration:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:#036;
    font-weight:bold;
	display:block;
	padding-top:6px
	
}

Código:
<div class="uno">
<input type="text" class="" />
</div>
 
<div class="dos">
<a href="" class="img">Buscar</a>
</div>
  #4 (permalink)  
Antiguo 19/12/2010, 21:55
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: Problema muy sencillo, Estilo formulario textfiled.

Perfecto, muchas gracias :D
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.

Etiquetas: estilo, sencillo, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:59.