Question

我正在查看文本框here。它们有很好的效果。如何用CSS实现相同的效果。这是我能够得到的，但它并不接近。

我想要实现的目标：

默认情况下，文本框具有灰色轮廓，当处于焦点时，它会变为蓝色。我想要一个类似的效果。我尝试使用大纲属性和阴影（在下面的代码中），但无法得到它。

我试图获得这种效果（https://jsfiddle.net/7jphmdzf/）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用以下解决方案（https://jsfiddle.net/7jphmdzf/1/）：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

要更改:focus上大纲的颜色，您必须设置border。无需为outline的{{1}}或box-shadow设置样式。

Answer 2

试试这个，

#tags {

  width:200px;
  height:30px;
  border: 2px solid grey;
  border-radius: 10px;
}

#tags:focus {
     outline: 0;
     border: 2px solid #109cdf;
}

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

与css的样式文本框

2 个答案: