cup_of cup_of - 1 year ago 96
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;


Answer Source

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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download