Czy jest możliwe dodanie cienia skrzynkowego do danych wejściowych w formularzach css?

Question

I zostały próbuje dodać kilka efektów snazzy do moich skrzynek wejściowych i jeden znalazłem pudełko shadowing, spojrzałem na w3schools poradnik dla pola cieniowania i próbowałem wielu rzeczy, aby dodać go do mojej skrzynki wejściowe:

.l_input { 
    box-shadow: 10px; 
} 

To wydawało się nie działać dla mojego kodu. Próbowałem też użyć go przy użyciu efektu unosić pseudo i to znowu nie działa na tym, pseudokod próbowałem robić:

.l_input { 
    box-shadow: 5px; 
} 
.l_input:hover { 
    box-shadow: 10px; 
    transition: 2s; 
} 

i znowu, że nie wydaje się działać, jeśli jest to prawo Składnia tego, jak kod powinien zadziałać lub robię mały błąd dzięki z góry, myślałem, że może nie jest to obsługiwane dla wejść, ale to zabrzmiało dziwnie.

Answer 1

.l_input { 
 
    box-shadow: 0 1px 2px rgba(0,0,0,0.15); 
 
    transition: 0.3s ease-in-out; 
 
} 
 

 
/* hover effect */ 
 
.l_input:hover { 
 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
 
}

<div class="l_input"> Content <div>

Answer 2

Można dać cień pudełko jak następujący sposób:

.l_input { 
    box-shadow: 5px 5px 5px #000; 
} 

Należy podać przynajmniej dwie pierwsze wartości.

Pierwsze dwa opisują poziomy cień i pionowy cień. Trzeci to rozmycie i kolor.

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; 

Reference link:

Working Fiddle

I można nadać moc cień następujący sposób.

.l_input { 
box-shadow: 5px 5px 5px #000; 
} 
.l_input:hover { 
    box-shadow: 10px 10px 10px #000; 
    transition: 2s; 
} 

Fiddle

Answer 3

Należy pracował poniżej code.If klasa jest .l_input to będzie worked.Its zależy od znaku.

.l_input { 
box-shadow: 5px 5px 5px #000; 
} 

Jeśli nie to spróbuj poniżej kodu:

można zobaczyć w JSFIDDLE.

body { 
 
    background: #ccc 
 
} 
 
.box h3 { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 80px; 
 
} 
 
.box { 
 
    width: 70%; 
 
    height: 200px; 
 
    background: #FFF; 
 
    margin: 40px auto; 
 
} 
 
/*================================================== 
 
* Effect 1 
 
* ===============================================*/ 
 

 
.effect1 { 
 
    -webkit-box-shadow: 0 10px 6px -6px #777; 
 
    -moz-box-shadow: 0 10px 6px -6px #777; 
 
    box-shadow: 0 10px 6px -6px #777; 
 
} 
 
/*================================================== 
 
* Effect 2 
 
* ===============================================*/ 
 

 
.effect2 { 
 
    position: relative; 
 
} 
 
.effect2:before, 
 
.effect2:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 15px 10px #777; 
 
    -moz-box-shadow: 0 15px 10px #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    -webkit-transform: rotate(-3deg); 
 
    -moz-transform: rotate(-3deg); 
 
    -o-transform: rotate(-3deg); 
 
    -ms-transform: rotate(-3deg); 
 
    transform: rotate(-3deg); 
 
} 
 
.effect2:after { 
 
    -webkit-transform: rotate(3deg); 
 
    -moz-transform: rotate(3deg); 
 
    -o-transform: rotate(3deg); 
 
    -ms-transform: rotate(3deg); 
 
    transform: rotate(3deg); 
 
    right: 10px; 
 
    left: auto; 
 
} 
 
/*================================================== 
 
* Effect 3 
 
* ===============================================*/ 
 

 
.effect3 { 
 
    position: relative; 
 
} 
 
.effect3:before { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 15px 10px #777; 
 
    -moz-box-shadow: 0 15px 10px #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    -webkit-transform: rotate(-3deg); 
 
    -moz-transform: rotate(-3deg); 
 
    -o-transform: rotate(-3deg); 
 
    -ms-transform: rotate(-3deg); 
 
    transform: rotate(-3deg); 
 
} 
 
/*================================================== 
 
* Effect 4 
 
* ===============================================*/ 
 

 
.effect4 { 
 
    position: relative; 
 
} 
 
.effect4:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    right: 10px; 
 
    left: auto; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 15px 10px #777; 
 
    -moz-box-shadow: 0 15px 10px #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    -webkit-transform: rotate(3deg); 
 
    -moz-transform: rotate(3deg); 
 
    -o-transform: rotate(3deg); 
 
    -ms-transform: rotate(3deg); 
 
    transform: rotate(3deg); 
 
} 
 
/*================================================== 
 
* Effect 5 
 
* ===============================================*/ 
 

 
.effect5 { 
 
    position: relative; 
 
} 
 
.effect5:before, 
 
.effect5:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 25px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 35px 20px #777; 
 
    -moz-box-shadow: 0 35px 20px #777; 
 
    box-shadow: 0 35px 20px #777; 
 
    -webkit-transform: rotate(-8deg); 
 
    -moz-transform: rotate(-8deg); 
 
    -o-transform: rotate(-8deg); 
 
    -ms-transform: rotate(-8deg); 
 
    transform: rotate(-8deg); 
 
} 
 
.effect5:after { 
 
    -webkit-transform: rotate(8deg); 
 
    -moz-transform: rotate(8deg); 
 
    -o-transform: rotate(8deg); 
 
    -ms-transform: rotate(8deg); 
 
    transform: rotate(8deg); 
 
    right: 10px; 
 
    left: auto; 
 
} 
 
/*================================================== 
 
* Effect 6 
 
* ===============================================*/ 
 

 
.effect6 { 
 
    position: relative; 
 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
} 
 
.effect6:before, 
 
.effect6:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    top: 50%; 
 
    bottom: 0; 
 
    left: 10px; 
 
    right: 10px; 
 
    -moz-border-radius: 100px/10px; 
 
    border-radius: 100px/10px; 
 
} 
 
.effect6:after { 
 
    right: 10px; 
 
    left: auto; 
 
    -webkit-transform: skew(8deg) rotate(3deg); 
 
    -moz-transform: skew(8deg) rotate(3deg); 
 
    -ms-transform: skew(8deg) rotate(3deg); 
 
    -o-transform: skew(8deg) rotate(3deg); 
 
    transform: skew(8deg) rotate(3deg); 
 
} 
 
/*================================================== 
 
* Effect 7 
 
* ===============================================*/ 
 

 
.effect7 { 
 
    position: relative; 
 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
} 
 
.effect7:before, 
 
.effect7:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 10px; 
 
    right: 10px; 
 
    -moz-border-radius: 100px/10px; 
 
    border-radius: 100px/10px; 
 
} 
 
.effect7:after { 
 
    right: 10px; 
 
    left: auto; 
 
    -webkit-transform: skew(8deg) rotate(3deg); 
 
    -moz-transform: skew(8deg) rotate(3deg); 
 
    -ms-transform: skew(8deg) rotate(3deg); 
 
    -o-transform: skew(8deg) rotate(3deg); 
 
    transform: skew(8deg) rotate(3deg); 
 
} 
 
/*================================================== 
 
* Effect 8 
 
* ===============================================*/ 
 

 
.effect8 { 
 
    position: relative; 
 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
} 
 
.effect8:before, 
 
.effect8:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    top: 10px; 
 
    bottom: 10px; 
 
    left: 0; 
 
    right: 0; 
 
    -moz-border-radius: 100px/10px; 
 
    border-radius: 100px/10px; 
 
} 
 
.effect8:after { 
 
    right: 10px; 
 
    left: auto; 
 
    -webkit-transform: skew(8deg) rotate(3deg); 
 
    -moz-transform: skew(8deg) rotate(3deg); 
 
    -ms-transform: skew(8deg) rotate(3deg); 
 
    -o-transform: skew(8deg) rotate(3deg); 
 
    transform: skew(8deg) rotate(3deg); 
 
}

<div class="box effect1"> 
 
    <h3>Effect 1</h3> 
 
</div> 
 

 
<div class="box effect2"> 
 
    <h3>Effect 2</h3> 
 
</div> 
 

 
<div class="box effect3"> 
 
    <h3>Effect 3</h3> 
 
</div> 
 

 
<div class="box effect4"> 
 
    <h3>Effect 4</h3> 
 
</div> 
 

 
<div class="box effect5"> 
 
    <h3>Effect 5</h3> 
 
</div> 
 

 
<div class="box effect6"> 
 
    <h3>Effect 6</h3> 
 
</div> 
 

 
<div class="box effect7"> 
 
    <h3>Effect 7</h3> 
 
</div> 
 

 
<div class="box effect8"> 
 
    <h3>Effect 8</h3> 
 
</div>

Answer 4

Try To

.l_input { 
 
box-shadow: 3px 3px 2px #666; 
 
    transition: 0.2s all linear; 
 
    border:1px solid #999; 
 
} 
 

 
.l_input:hover { 
 
box-shadow: 0 5px 15px #666; 
 
transition: 0.2s all linear; 
 
}

<input type="text" class="l_input">