Foros del Web - Ver Mensaje Individual

emprear · #8 (**permalink**) 24/12/2011, 18:14

bueno, estuve analizando el ejemplo en particular, y no solo la generación de las flechas

hice esto, que por lo pronto funciona en IE7+ (si la F12 de ie9 no me engaña), Chrome. FF, opera, Safari. Sirve con un input submit tanto como con un div.

Se puede optimizar, y habría que buscar corregir algun detalle con la alineación vertical de los textos del boton y del input text
Y el efecto hover, lo modifique un poco (me gustó más)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
.contiene_input{
padding: 0;
margin: 0;
border: none;   
height: 26px;
}
 
.contiene_input input{
float:left;
border: none;
background-color:#3A6411;
padding: 1px 2px 0px 2px;
margin: 0;
width: 200px;
height: 25px;
}
 
.contiene_input div{
float:left;
background-color:#3A6411;
padding: 0;
margin: 0;
height: 100%;
}
 
.flecha-izq {
  border-color: transparent white transparent transparent;
  border-style:solid;
  border-width:5px;
  margin-top: 7px;
  width:0;
  height:0;
  display: inline-block;
}
 
.ccolor {
background-color: #fff !important;
}
.f-tres {
border-color: transparent #3A6411 transparent transparent !important;
margin-left: -5px;
clear: both;
}
 
.f-dos {
border-color: transparent red transparent transparent !important;
margin-left: -5px;
clear: both;
}
 
div.texto {
padding: 0 8px;
background-color: red;
}
 
input.texto {
width: 80px;
height: 26px;
}
 
div.texto:hover, input.texto:hover{
margin-left: -5px;
cursor: pointer;
}
 
/*]]>*/
</style>
</head>
<body>
<div>
<p>Con un div</p>
<div class="contiene_input">
<input type="text" /><div><span class="flecha-izq"><!-- flecha --></span></div><div class="ccolor"><span class="flecha-izq f-dos"><!-- flecha --></span></div><div class="texto">texto</div>
 
</div>
 
<p>Con un input submit</p>
<div class="contiene_input">
<input type="text" /><div><span class="flecha-izq"><!-- flecha --></span></div><div class="ccolor"><span class="flecha-izq f-tres"><!-- flecha --></span></div><input type="submit" class="texto" value="procesar" />
</div>
</div>
</body>
</html>

Parto a la cena navideña/familiar
Un saludo y Feliz Navidad para todos