Метка: placeholder

Стили CSS для placeholder

CSS # on Стили CSS для placeholder
input {
	padding: 15px;
	width: 400px;
	border: 1px solid rgba(0,0,0, .6);
	border-radius: 5px;
	background: #EFEEEE;
  font-size: 1.3em;
}
input::-webkit-input-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input::-moz-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-ms-input-placeholder { 
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}

http://codepen.io/Treehouse/pen/fIesK

Плейсхолдеры и ХТМЛ5

XHTML # # on Плейсхолдеры и ХТМЛ5
Плейсхолдеры и ХТМЛ5

Не так давно написал: Очистка поля input при фокусе на jQuery
Оказывается в ХТМЛ5 есть плейсхолдер и выглядит это приблизительно так:
ХТМЛ

<h1 class="project-name">
    <a href="http://unwrongest.com/projects/defaultvalue">Unwrongest - Jquery Defaultvalue</a>
</h1>

<input id="username" placeholder="Enter a username..." type="text" />
<input id="password" placeholder="Enter a password..." type="password" />
<textarea id="description" placeholder="Describe yourself..."></textarea>

ЦСС

body { background: #0D1114; }
.project-name a { padding: 0; color: #3cf; text-transform: uppercase; font: bold 13px/30px 'Arial', 'sans-serif'; }

input,
textarea{ padding: 10px; width: 300px; font-weight: bold; font-family: Arial, 'sans-serif'; margin-bottom: 10px; font-size: 13px; border: none; clear: both; float: left; }
.empty { color: #999; }

ЯВА

$('#username, #password, #description').defaultValue();

И вот ДЕМО.

Scroll Up