Я абсолютный новичок в 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 справа, который также имеет закругленные внешние края.Это похоже на страницу регистрации в Twitter .Если вы щелкнете по каждому полю поля ввода, вы получите общее представление о том, как стилизованы мои теги input и span.
Есть ли способ, чтобы "box-shadow" не отбрасывала тень междуполя input и span?Итак, нет тени справа от поля «input» и тени слева от тега «span»?
Обратите внимание, что в этом я пытаюсь поддерживать движки рендеринга Mozilla и Webkit.CSS.
Спасибо за потраченное время,
spryno724