html - border-radius 在表单元素文本中只显示两条边

Question

我制作了一个文本类型的表单元素，我希望它的 border-radius 为 5px，但是当我写 border-radius:5px 时，它显示的框如下所示:

为什么它显示实线边框而不是仅仅改变边 Angular ，为什么只有 2 个边？

我的html和css如下:

<form class="textBoxForm">
<input class="textBox" type="text" value="(123)456-7890" style="width:215px; height:38px; font-size:23px; padding-left:12px;padding-top:0px;color:#666666">
</form>


.textBox{
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
vertical-align:middle;
border-radius:5px;
}

请指导我。

Answer 1

你必须给 Border 类 .textBox 避免这种阴影效果

 border:1px #ccc solid;

演示 http://jsfiddle.net/rr6u6rqs/2/