Кто-нибудь имеет представление о том, что может быть причиной синего поля справа от поля ввода?
Это было проклятием моего существования в последние несколько дней. Только появляется с перерывами. Разметка для каждого ввода выглядит так:
<div class="input text">
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" class="required" tabindex="30"/>
</div>
Следует отметить, что метка располагается в верхней части поля и затемняется / затухает при нажатии / вводе.
Это происходит только в веб-комплекте на Mac и, по-видимому, в Vista.
http://i.stack.imgur.com/5BQcv.jpg
РЕДАКТИРОВАТЬ: Извините, CSS:
input[type="text"], input[type="password"] {
height: 30px;
outline: none;
-webkit-transition: -webkit-box-shadow 0.3s linear;
-moz-transition: -moz-box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
.input.text input[type="text"]:focus, input[type="text"]:active, .input.text input[type="password"]:focus, input[type="password"]:active {
-moz-box-shadow: 0 0 12px #82cce8;
-webkit-box-shadow: 0 0 12px #82cce8; /* chrome seems to show a smaller box shadow */
box-shadow: 0 0 12px #82cce8;
}
.input.text input, .input.text span.field {
padding: 10px 15px;
width: 92%;
font-size: 2em;
font-family: 'HelveticaNeueW01-45Ligh', Arial, Helvetica, sans-serif;
border: 1px solid #cecece;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
-moz-box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
}
input::-webkit-input-placeholder { color: #e2e2e2;}
input:-moz-placeholder { color: #e2e2e2;}
Содержащий div просто имеет отступ 20px.
Кроме того, извините sdleihssirc, пришлось изменить ссылку на изображение из-за редактирования.
ОБНОВЛЕНИЕ: Проверить ссылку на gcpereira.com [без пробелов] / материал / тест / посадка /