cup_of cup_of - 1 month ago 6
CSS Question

How to do a shadowed border on a form input?

Hello I am tasked to make an input field look like the screenshot below:

enter image description here

I can do everything except the border shadow thing. Is this possible using css?

In the photoshop file, this layer is given an "Inner Glow" and this is responsible for the border shadow.

Here is a screenshot of the layer style:

enter image description here

Here is my css so far just incase it is needed:

#input_1_1 {
background-color: #f1f5f6;
border-radius: 12px;
height: 47px;
padding: 0 17px;
}


Thanks!

Answer

You need to use box-shadow–just play around with the values until you match the mockup.

input {
   box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}