I'm new to CSS3, so I appreciate your patience. Here is the HTML code I am working with:
<input name="firstName" id="firstName" type="text"><span class="tip">Just a tip</span>
Here are the CSS styles applied to the "input" and "span" elements:
input[type="text"], input[type="password"], textarea {
border-top:1px solid #5F5F5F;
border-left:1px solid #5F5F5F;
...
}
... denotes more CSS rules
.tip:hover {
border: 1px solid #22C3EB;
-webkit-box-shadow: 0 0 5px #22C3EB;
...
}
The design resembles the Twitter sign-up page, with rounded text fields and span tags on the right side that match the style. When clicking on each input field, you can see how they are styled.
Is there a way to prevent the box shadow from appearing between the "input" and "span" elements? I want to avoid shadows on the right of the input field and left of the span tag if possible.
My goal is to ensure this styling works well on both Mozilla and Webkit browsers.
Thank you for your assistance,
spryno724