CODEWITHSUNDEEP
webkitcss
Oliver Spryn
Oliver Spryn

Reputation: 17348

CSS3 Box Shadow Direction

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

Upvotes: 0

Views: 2393

Answers (1)

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

use inner-wrap and use 

box-shadow: -5px 0 0px #FFFFFF;

http://jsfiddle.net/pramendra/y67Yt/3/

Upvotes: 1

Related Questions