如何在表单输入上做阴影边框？

Question

您好，我的任务是让输入字段看起来像下面的屏幕截图：

除了边框阴影，我什么都能做。这可能使用 css?

在 photoshop 文件中，该层被赋予了 "Inner Glow"，它负责边框阴影。

图层样式截图如下：

这是我的 css 到目前为止，以防万一：

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

谢谢！

Answer 1

您需要使用 box-shadow——只需调整这些值，直到您匹配模型。

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

Answer 2

像这样：

#input_1_1 {
    background-color: #f1f5f6;
    border-radius: 12px;
    height: 47px;
    padding: 0 17px;
  border: none;
  box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.4);
}

<input id="input_1_1" type="text" name="name">

如何在表单输入上做阴影边框？

How to do a shadowed border on a form input?

html

css

psd