html - 使用 css 样式化文本框

Question

我正在查看文本框 here .它们有很好的效果。如何使用 CSS 实现相同的效果。这是我能够得到的，但还差得远。

我想要实现的目标:

默认情况下，文本框的轮廓是灰色的，当聚焦时它会变成蓝色。我想要类似的效果。我尝试使用 outline 属性和阴影(在下面的代码中)但无法实现。

我试图获得这种效果(https://jsfiddle.net/7jphmdzf/):

#tags {
  width:500px;
  height:30px;
  border: 1px solid grey;
  border-radius: 10px;
}
input:focus {
  outline: 0;
  box-shadow: 0 0 0 0.7pt blue; 
}

<div class="ui-widget">
  <input id="tags">
</div>

Answer 1

您可以使用以下解决方案 ( https://jsfiddle.net/7jphmdzf/1/ ):

#tags {
  outline:0;
  width:500px;
  height:30px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size:24px;
  padding:8px 12px;
}
#tags:focus {
  outline:0;
  border: 2px solid #0097cf;
  border-radius: 8px;
}

<div class="ui-widget">
  <input id="tags" placeholder="Tags">
</div>

更改 :focus 上的轮廓颜色你必须设置 border .无需为 outline 设置样式或 box-shadow的 <input> .