我是一个完整的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 sign-up page。如果单击每个输入字段字段,您将大致了解输入和范围标记的样式。
有没有办法防止“box-shadow”在“input”和“span”字段之间投射阴影?那么,“输入”字段右侧没有阴影,“span”标签左侧没有阴影?
请注意我正在尝试在此CSS中支持Mozilla和Webkit渲染引擎。
感谢您的时间,
spryno724