emmgfx » CSS

HTML5: Editar el css de Placeholder

Josep Viciana — Tue, 10 May 2011 11:02:39 +0000

Hace poco fui a una conferéncia sobre HTML5 en la que se explicaban los cambios, las novedades y la actitud de los pesos pesados en estos temas. La parte que me pareció más interesante fue la de formularios.

Una de las cosas que explicaron fué el uso de placeholder, un atributo para los campos de texto que lo que hace es mostrar un texto cuando el input no tiene valor, pero ese texto no representa ningún valor y es sólo para ayudar al usuario. Por si no me explico, una captura:

Por defecto el placeholder tiene un color, que indica el navegador y suele ser gris. En cuanto al grosor, espaciado, color, etc, asumirá que usa el mismo que el texto normal (sea o no definido en css). Si se quieren cambiar estos estilos se puede utilizar este pequeño snippet que he encontrado por ahí.

No lo he probado con diferentes navegadores. Pero en la fuente se indica que es compatible con Webkit (Chrome y Safari) y con Firefox (a partir de la versión 4).

input::-webkit-input-placeholder {
    color:    #c00;
    font-weight: bold;
}
input:-moz-placeholder {
    color:    #c00;
    font-weight: bold;
}

Y el formulario quedaría así:

A ver si me acuerdo más adelante y escribo algo sobre los type range.

Articulos relacionados

Quitar el borde de los input con foco en Safari y Chrome

Josep Viciana — Thu, 06 Aug 2009 09:08:42 +0000

Cuando se utiliza por primera vez un navegador como Chrome o Safari, estoy seguro de que una de las cosas que más se notan es el resplandor / borde. La primera impresión es que ayuda a la accesibilidad, que es un efecto lógico y muchas veces necesario, y que a mucha gente con poca experiéncia le hará un favor.
Pero si tu eres quien maqueta la página y optas por aplicar un efecto propio con css, al mezclarse con el propio del navegador puede que parezca algo extraño y quede mal, pero ese efecto se puede evitar con el atributo outline de CSS.

Igual que se hacía para evitar el punteado de los enlaces que se implementó en nosecual versión de Firefox (3.1 creo).

#signup .text:focus{
	outline:0px;
}

Articulos relacionados

Centrar texto en vertical

Josep Viciana — Wed, 29 Jul 2009 15:21:06 +0000

Normalmente para tener un enlace con el texto centrado en vertical, uso un padding por arriba y por abajo, hasta que queda a la altura que necesito. Pero muchas veces he notado que aunque se vea bien en diferentes navegadores, en OS X se hace un pixel más alto. El pixel de diferéncia es por el clear type que utiliza OS X, que hace a la letra ocupar un pixel más de alto y hace que se puedan descuadrar algunas cosas.

La solución es fijar el alto de los enlaces en pixeles, darle padding a los laterales y centrar el texto verticalmente (sin paddings).

Y eso se hace con este CSS:

vertical-align:middle;
display:table-cell;

Por ejemplo:

#menu-horizontal ul li a{
	color:#FFFFFF;
	text-decoration:none;
	padding:0px 10px 0px 10px;
	border-right:1px solid #5f77af;
	border-left:1px solid #293c69;
	outline:none;
	height:36px;
	vertical-align:middle;
	display:table-cell;
}

EDITO: No es compatible con Internet Explorer 6.

Articulos relacionados

inline-block cross-browser

Josep Viciana — Wed, 22 Jul 2009 09:40:20 +0000

En Foo Hack publicaron un recurso CSS que a veces utilizo y creo que estaría bien compartir, el problema es que no explican para qué sirve hacer lo que explican, y eso es lo que voy a hacer.

Hay tres valores principales para el atributo display de CSS; normal, block e inline-block.

El primero no modifica el formato del contenedor al que se aplica, es decir, si es un div y se deja el display normal seguirá ocupando el 100% del ancho que disponga del contenedor padre.
El segundo si lo modifica, puede usarse por ejemplo para enlaces, para hacer que el enlace ocupe un tamaño determinado y se pueda hacer click en toda la zona que ocupa visualmente, no sólo en el texto. Esto es quizá dificil de entender pero con un par de ejemplos es más fácil: los enlaces de la cabecera de Facebook a día de hoy podrían estar hechos con display:inline-block; por que el enlace ocupa un tamaño determinado y para pulsarlo no hace falta que el click se haga en el mismo texto del enlace. Si el display fuera normal, el enlace sólo serviría desde la zona de texto, si se hace click fuera no serviría de nada.
display:block sirve para eso, pero puede que no siempre sea lo que se quiere hacer. El valor block posiciona los elementos uno encima del otro, y pocas veces se quiere hacer eso. Lo más normal es que se coloquen uno al lado del otro hasta que llegue al limite de ancho y entonces haga una fila nueva. Para eso se hizo el display:inline-block.

El problema es que en bastantes navegadores el valor inline-block simplemente no existe (en todos los nuevos funciona sin problemas) y ante la duda parece comportarse como un block. Pero hay una forma de que funcione bien en “todos” los navegadores (lo pongo entre comillas por que en Explorer 3, 4.01, 5.01 o 5.55 ni lo he probado). Sólo hay que utilizar estos valores y el hack * para algunos explorers.

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

Aunque yo soy de los que piensa que lo mejor es no dejar acceder a la aplicación a quienes no actualizan su navegador, entiendo que haya quien utiliza navegadores antiguos por razones extrañas; por eso siempre van bien este tipo de “hacks” que ensucian el código y frenan la mejora de la web.