Box Schatten für Textfeld nur unten

ich mit Box Schatten nicht sehr vertraut bin, und ich will nur mit unteren Feld Schatten für meine Web ein Textfeld machen, ist hier, was der Code wie folgt aussehen:Box Schatten für Textfeld nur unten

input[type="text"], input[type="email"], textarea{ box-shadow: 0 0 0 1.5px, 0 1px 0 rgba(0,0,0,0.08) inset}

dieser Code, der vollen Schattenkasten für Textfield- und Textbereich erzeugt, möchte ich nur unteren Teil, um den Schattenkasten zu erhalten, ich sah bereits box-shadow bootom solution, aber ich tue es nicht, was zu tun ist

Quelle

2016-07-29 Idham Choudry

unten Codes versuchen, erstellt bottom shadow für Eingabe und Textfeld und verwenden :focus anstelle von :active.

input[type="text"], input[type="email"], textarea{ 
border:none; 
box-shadow:1px 1px 10px 5px rgba(1,1,1,0.2); 
transition: 0.6s ease; 
} 

input[type="text"]:focus, input[type="email"]:focus, textarea:focus{ 
box-shadow:0px 10px 10px -8px rgba(1,1,1,0.8); 
}

input[type="text"], input[type="email"], textarea{ 
 
border:none; 
 
box-shadow:1px 1px 10px 5px rgba(1,1,1,0.2); 
 
transition: 0.6s ease; 
 
margin-bottom:50px; 
 
float:left; 
 
width:100%; 
 
height:20px; 
 
} 
 
textarea{ 
 
height:150px; 
 
} 
 
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{ 
 
box-shadow:0px 10px 10px -8px rgba(1,1,1,0.8); 
 
}

<input type="text"> 
 
<input type="email"> 
 
<textarea></textarea>

Quelle

2016-07-29 04:06:02 frnt

danke seine Arbeit, aber ich möchte modifizierten Code hinzufügen, so wenn das Textfeld und Textbereich aktiv werden sie volle Shadowbox, aber das Problem ist, ich muss meinen Klick halten, damit sie voll werden, wenn ich es loslassen, es zurück nur zur unteren Box Schatten, aber die TextArea funktioniert nur das Textfeld, hier ist der Code 'input [type =" text "]: aktiv, input [type =" email "]: aktiv, textarea: aktiv { box- Schatten: 0 0 0 1.5px, 0 1px 0 rgba (0,0,0,0,08) Einschub; } ' –

@Wallflower Willkommen, versuchen Sie aktualisierte Codes. – frnt

versuchen Sie dieses. Ich fand dies auf How to make shadow on border-bottom?

div{ 
     -webkit-box-shadow:0px 1px 1px #de1dde; 
     -moz-box-shadow:0px 1px 1px #de1dde; 
     box-shadow:0px 1px 1px #de1dde; 
      } 
     <div>wefwefwef</div>

Quelle

2016-07-29 04:01:33

Verwendung Boden Schatten in css

.one-edge-shadow { 
    -webkit-box-shadow: 0 8px 6px -6px black; 
     -moz-box-shadow: 0 8px 6px -6px black; 
      box-shadow: 0 8px 6px -6px black; 
}

Quelle

2016-07-29 04:01:39

Dieser Code wird einen unteren Schatten in allen Browsern für alle Elemente hinzufügen,

-webkit-box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75); 
-moz-box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75); 
box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75);

Quelle

2016-07-29 04:04:31

dank seiner Arbeits, aber ich mag modifizierte Code hinzufügen, so dass, wenn das Textfeld und Textbereich aktiv sie voll shadowbox werden, aber das Problem ist, ich brauche meinen Klick zu halten, so sie werden voll, wenn ich sie loslasse, wird nur auf den unteren Kastenschatten zurückgegriffen, aber die Textfläche funktioniert nur im Textfeld, hier ist der Code 'input [type =" text "]: aktiv, input [type =" email " ]: aktiv, Textbereich: aktiv { box-shadow: 0 0 0 1.5px, 0 1px 0 rgba (0,0,0,0,08) Einschub; } ' –

Box Schatten für Textfeld nur unten

Antwort

Verwandte Themen