I’m a total CSS3 noob, so please bear with me. I have the following

Question

0

Asked: May 21, 20262026-05-21T04:24:36+00:00 2026-05-21T04:24:36+00:00

I’m a total CSS3 noob, so please bear with me. I have the following

0

I’m a total CSS3 noob, so please bear with me. I have the following HTML:

<input name="firstName" id="firstName" type="text"><span class="tip">Just a tip</span>

… with the following CSS applied to the “input” field and “span” tag:

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;
}

Basically, it is a rounded text field, with another span tag on the right, which also has rounded outer edges. It looks similar to the Twitter sign-up page. If you click on each input field field, you will get a general idea of the way my input and span tags are styled.

Is there a way to prevent the “box-shadow” from casting a shadow between the “input” and “span” fields? So, no shadow on the right side of the “input” field, and no shadow on the left side of the “span” tag?

Please note I am trying to support both Mozilla and Webkit rendering engines in this CSS.

Thank you for your time,
spryno724