i need the exact shadow with css not with image for input field

Question

Hi Im facing issue while i am making this with css http://prntscr.com/dbkjn2

No, you can't. Pseudo-elements can be applied only to elements that are not self closing. — Harry, Nov 25 '16 at 10:11
Use a wrapper `div` element and add the pseudo-element to it. — Harry, Nov 25 '16 at 10:14
Possible duplicate of [Psudo-Random Number Prediction](http://stackoverflow.com/questions/7101445/psudo-random-number-prediction) — Samudrala Ramu, Nov 25 '16 at 10:27
@SamudralaRamu: Are you sure you posted the link in the correct thread? That doesn't seem to have any relation to this question. — Harry, Nov 25 '16 at 10:32
@Harry You say "Pseudo-elements can be applied only to elements that are not self closing" but that's not the totality of it. You also can't assign ::after to , <style>, <script> etc.</style> — Mr Lister, Nov 25 '16 at 10:34
@MrLister: I said it can only be applied to elements that are not self closing and not that it can be applied to all elements that are not self closing :) — Harry, Nov 25 '16 at 10:36
@Harry I hear you. So you're saying you _cannot_ assign ::after pseudo elements to void elements. I give you, [this fiddle](https://jsfiddle.net/MrLister/5qo4xtLf/). — Mr Lister, Nov 25 '16 at 10:45
@MrLister: Not everything that works in browsers are technically *supposed* to be working that way. Pseudo-elements are placed before or after the content of an element and so technically the element should atleast be allowed to have content for it to be eligible to get a pseudo-element. `hr` as you have stated is a void element and so I rest my case there. — Harry, Nov 25 '16 at 10:55

score 1 · Accepted Answer · edited May 23 '17 at 12:24

If you can wrap your input with a label, you could do something like this, where you combine pseudo elements with a rotation.

.shadow {
  position: relative;
}
.shadow::before,
.shadow::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 40%;
  height: 100%;
  top: -5px;
  background: transparent;
  box-shadow: 0px 10px 5px #bbb;
}
.shadow::before {
  left: 10%;
  transform: rotate(-5deg);
}
.shadow::after {
  right: 10%;
  transform: rotate(5deg);
}

<label class="shadow"><input type="text"></label>

Here is a 2:nd sample, using gradient

.shadow {
  position: relative;
}
.shadow::before,
.shadow::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 45%;
  height: 95%;
  top: 6px;
  background: transparent;
  opacity: 0.7;
}
.shadow::before {
  left:5%;
  transform: rotate(-5deg);
  background: linear-gradient(to bottom left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
.shadow::after {
  right:5%;
  transform: rotate(5deg);
  background: linear-gradient(to bottom right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}

<label class="shadow"><input type="text"></label>

These 2 can of course be combined in many ways to achieve different shadow effects.

With box-shadow one can add several shadows in a row: How to make the new long shadow trend with CSS?

With gradient one can use different angles 90deg instead of to bottom right and so on.

@Bhupinderkumar I updated my answer with a few more suggestion. To create an exact copy will take some time elaborating with posted techniques and I hope you understand it is not for me to do that work. — Asons, Nov 26 '16 at 11:54

score -1 · Answer 2 · answered Nov 25 '16 at 10:31

Here I've mentioned some code, Please check it.

HTML

<div class="form">
  <input type="text">
</div>

CSS

.form input{
  width: 200px;
  height: 20px;
  display: block;
  background: #fff;
  border:1px solid #ccc;
}
.form input:after{
  content:"";
}

i need the exact shadow with css not with image for input field

2 Answers2