CODEWITHSUNDEEP
css
I2mNew
I2mNew

Reputation: 173

Creating real tranparent div in CSS

I'm trying to design something good. I add box shadow to my input elements.

Design image

As you can see theese input elements are not really transparent. I want to see the shadow behind the inputs.

I tried;

input{
   background: none;
}

and

input{
   background: transparent;
}

I get same result. How can I see the shadow lights?

Upvotes: 0

Views: 33

Answers (1)

Tony Zhang
Tony Zhang

Reputation: 427

Drop shadow seems to just draw the shadow on the outside, it's not that there is a background color blocking it, the shadow just doesn't exist on the inside.

Something that you can do is to use a pseudo-element and blur it. also pseudo-elements don't work on inputs so you'll have to wrap it in a div

input{
  background:transparent;
  width:100px;
}

#input-container{
  width:100px;
}

#input-container::after{
  content:"";
  display:block;
  position:absolute;
  width:100px;
  height:20px;
  background:blue;
  transform:translate(0,-15px);
  filter:blur(10px);
  pointer-events:none;
}
    <div id="input-container">
        <input value="hello">

        </input>
    </div>

Upvotes: 1

Related Questions