HTML-код
<select name="server" id="server" class="nofocus">
<option value="X">X</option>
<option value="XX">XXE</option>
<option value="XXX">XXX</option>
</select>
CSS-код
#server {
border: solid 1px #eeeeee;
padding: .2em .25em .15em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#server:focus { background: rgba(0, 34, 255, 0.2);
transition-delay:0.5s;
}
.nofocus:focus { color:#FFF00; }
Так что я пытаюсь сделать несколько стилей "начать" с задержкой и начать стайлинг, как только элемент будет сфокусирован. Он показывает мне только #server и #server: код фокуса.
Необходимо указать свойство, к которому вы хотите применить переход, поэтому другие свойства (например, color
) не будут затронуты.
#server:focus {
background: rgba(0, 34, 255, 0.2);
transition:background;
transition-delay:0.5s;
}
Кроме того, указанный вами цвет (#FFF00
) неверен (имеет только 5 шестнадцатеричных цифр вместо 3 или 6)
Вы можете использовать сокращение перехода, чтобы указать, что стили будут переходить по-разному.
#server {
transition: height 1s 1s, opacity 1s;
}
Когда заданы два значения, первым значением является задержка, вторая - длительность
Больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/transition