PHP - Diseño en input text

Diseño en input text

Publicado por Alexis Malagan (1 intervención) el 17/09/2011 18:02:21

Hola a todos, como dice el titulo estoy intentando hacer un input text con un diseño, mejor dicho, un cuadro de búsqueda con un diseño más llamativo.

Les muestro algunos ejemplos:

acá en este diario tienen uno con diseño propio: http://tn.comar

o sino bing también es otro ejemplo: http://www.bing.com

Gracias y espero que me puedan ayudar para saber como creo estos tipos de cuadros de búsqueda.

Saludos!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Diseño en input text

Publicado por julian (3 intervenciones) el 17/09/2011 18:59:48

muy simple se la robe en 1 segundo a la barra de busqueda bing
devo entender que tienes un concepto de basico CSS
aca te dejo el codigo y mas abajo el rar para que te lo bajes con la imagen.

Codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing</title>
<style type="text/css">
.sw_bd{
position:relative;
float:left;
font-size:medium;
z-index:1
}
.sw_b{
float:left;
border:1px #e5e5e5 solid;
background:#fff;
padding:.19em .19em 1.06em 0
}

.sw_b input{
float:left;
border:0;
margin:0 0 -1em;
font-size:100%;padding:.25em .31em .31em .56em;width:23.45em;
-webkit-appearance:none;
outline:none;
height:1.25em;
line-height:1.25em
}

.sw_b .sw_qbtn{
background:#e66400 url(h7.png) 0 -1px;cursor:pointer; <--- faltar esa imagen esta en el .RAR
height:27px;
width:27px;
padding:27px 0 0;
margin:0 0 -14px;
overflow:hidden;
font-size:0;
border-radius:3px
}

body{
background:#b2bdc4;
margin-top:-1px;
margin:0;
padding:0;
font-family:Arial,Sans-Serif;
font-size:small
}
</style>
</head>
<body>
<div class="sw_bd">
<div class="sw_b">
<input name="q" title="Escribir el termino de busqueda" type="text" value=""/>
<input class="sw_qbtn" name="go" tabindex="0" title="Buscar" type="submit" value=""/>
</div>
</div>

</body>
</html>

Link del buscador :
http://www.mediafire.com/?1vv3i026rf08dmg

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar