Я полный новичок в CSS3, поэтому, пожалуйста, потерпите меня. У меня есть следующий HTML:
<input name="firstName" id="firstName" type="text"><span class="tip">Just a tip</span>
... со следующим CSS, примененным к полю "input" и тегу "span":
input[type="text"], input[type="password"], textarea {
border-top:1px solid #5F5F5F;
border-left:1px solid #5F5F5F;
border-bottom:1px solid #5F5F5F;
border-right:1px solid #5F5F5F;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
padding:10px;
width:200px;
}
input[type="text"]:hover, input[type="password"]:hover, textarea:hover {
border: 1px solid #22C3EB;
-webkit-box-shadow: 0 0 5px #22C3EB;
-moz-box-shadow: 0 0 5px #22C3EB;
box-shadow: 0 0 5px #22C3EB;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
border: 1px solid #972324;
-webkit-box-shadow: 0 0 5px #972324;
-moz-box-shadow: 0 0 5px #972324;
box-shadow: 0 0 5px #972324;
}
.tip {
font-size:11px;
border-top:1px solid #22C3EB;
border-right:1px solid #22C3EB;
border-bottom:1px solid #22C3EB;
border-left:1px solid #5F5F5F;
border-bottom-right-radius:5px;
border-top-right-radius:5px;
padding:12px 10px 10px 10px;
width:200px;
}
.tip:hover {
border: 1px solid #22C3EB;
-webkit-box-shadow: 0 0 5px #22C3EB;
-moz-box-shadow: 0 0 5px #22C3EB;
box-shadow: 0 0 5px #22C3EB;
}
По сути, это закругленное текстовое поле с другим тегом span справа, который также имеет закругленные внешние края. Она похожа на страницу регистрации в Твиттере. Если вы нажмете на каждое поле ввода, вы получите общее представление о том, как оформлены мои теги input и span.
Есть ли способ предотвратить отбрасывание тени «box-shadow» между полями «input» и «span»? Итак, нет тени справа от поля «ввод» и нет тени слева от тега «span»?
Обратите внимание, что я пытаюсь поддерживать механизмы рендеринга Mozilla и Webkit в этом CSS.
Спасибо за ваше время,
spryno724
