CSS3 Box Shadow Direction

Je suis un noob total CSS3, alors s'il vous plaît, supportez-moi. J'ai le code HTML suivant:CSS3 Box Shadow Direction

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

... avec le CSS suivant appliqué au champ "d'entrée" et tag "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; 
}

Fondamentalement, il est un champ de texte arrondi, avec une autre étiquette d'envergure sur la droite, qui a également des bords extérieurs arrondis. Il ressemble à Twitter sign-up page. Si vous cliquez sur chaque champ de champ de saisie, vous aurez une idée générale de la manière dont mes balises input et span sont stylisées.

Y a-t-il un moyen d'empêcher le "box-shadow" de projeter une ombre entre les champs "input" et "span"? Donc, pas d'ombre sur le côté droit du champ "input", et pas d'ombre sur le côté gauche de la balise "span"?

Veuillez noter que j'essaie de prendre en charge les moteurs de rendu Mozilla et Webkit dans ce CSS.

Merci pour votre temps,
spryno724

Source

2011-04-08 Oliver Spryn