Boton sin bordes.

buzu · #1 (**permalink**) 17/06/2009, 19:29

Esto es quizá una tontería, pero yo prefiero pensar que es más bien una curiosidad en cuanto al comportamiento de los navegadores. O por lo menos de los dos en los que he probado esto (FF y Safari).

Lo descubrí por accidente, pero al parecer si remueves el borde de los input, estos pierden su apariencia inicial. Yo esperaba que solo se les quitara el borde, pero no es así. Por ejemplo, los input tipo text, pierden ese fondo medio sombreado que tienen, pero lo más raro fueron los botones, Esa forma ovaladita con reflejos se vuelve un cuadro gris. Lo de los tipo texto no me impresiona, pero lo de los botones si me toma por sorpresa, sobre todo por que los tipo radio conservan su apariencia a pesar de ser muy similares. Puedes hacer lo siguiente para probar:

Código HTML:

Ver original<html>
<style type="text/css">
*{
border-width: 0px;
}
</style>
<body>
 
<form name="input" action="" method="get">
First name: <input type="text" name="FirstName" value="Mickey" size="20" /><br />
Last name: <input type="text" name="LastName" value="Mouse" size="20" /><br />
<input type="radio" />Radio<br />
<input type="checkbox" />Radio<br />
<br />
<br />
<input type="file" />Image<br />
<br />
<br />
 
<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select><br />
 
<input type="submit" value="Submit" />
</form>
 
</body>
</html>

Otro que sufre una transformación total es el select. Y todo por solo quitarles el borde.

Curioso no?

jomaruro · #2 (**permalink**) 18/06/2009, 13:39

Hola:

La verdad, he hecho la prueba y es curioso. Lo lógico sería que desapareciera el borde pero solo eso. ¿Será útil en su momento?

El tiempo lo dirá.

Saludos.

buzu · #3 (**permalink**) 18/06/2009, 15:50

Si, si puede ser útil. Al menos a mi me parece que puede llegar a serlo....

Mikmoro · #4 (**permalink**) 18/06/2009, 16:09

Pues no lo entiendo: al menos en tu ejemplo, es que realmente lo único que elimina son bordes (inset, outset).
¿Qué otra cosa elimina que no sea un borde?

buzu · #5 (**permalink**) 18/06/2009, 16:47

viste los botones con FF? Los botones con FF en mac se ven como gelly buttons, pero al eliminar los bordes solo se mira un cuadro gris. Lo mismo pasa con el select. Pierde su color azul y se vuelve gris.

caricatos · #6 (**permalink**) 18/06/2009, 18:56

Hola:

Me parece que también cambian el aspecto si se modifica el color de fondo

... y quién sabe que otros estilos puden alterar el aspecto.

Saludos

buzu · #7 (**permalink**) 18/06/2009, 19:05

Hummm... eso no había notado. Curioso sin duda.

pato12 · #8 (**permalink**) 18/06/2009, 19:55

Ahh, a que nadie noto esto :D
Tambien le quita el borde a la una barra de IE:

(http://halfmusic.com.ar/iecss.png)

buzu · #9 (**permalink**) 18/06/2009, 22:12

creo que en realidad le está quitando el borde al formulario, si es que entendí bien a lo que te refieres

Mikmoro · #10 (**permalink**) 19/06/2009, 00:02

Cita:

Iniciado por buzu

Pierde su color azul y se vuelve gris.

¿Azul? Ah, debe ser que lo veo con FF2 y no hay nada azul. El botón es un cuadro gris con un borde outset negro, que le da relieve, y cuando lo quitas queda un simple cuadro gris, que es lo lógico.
Seguramente estabas hablando de la vista en FF3 o como dices FF MAC, que seguro que tiene otro aspecto y cambia como dices.

Pues no he dicho nada

(sólo que en FF2 no tiene misterio)

buzu · #11 (**permalink**) 19/06/2009, 00:30

Si, hablo de Mac.
Mira
normal:

sin borde:

EDITO: Acabo de checar FF2 y no hay misterio como bien lo menciona Mikmoro. Había olvidado que FF2 tiene todo al viejo estilo windows U_U