Question

早上好，

我有一点问题我有一个带边框半径的文本输入字段，并且由于边框半径，键入的第一个字符突出输入字段如何解决这个问题？比如第一个角色之前的一些空格。

HTML

<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">

CSS

input[type=text], [type=email], [type=password] {
  width: 300px;
  border-radius: 50px;
  font-size: 15px;
  display: block;
}

Answer 1

嗯，你只需要在输入中添加填充并根据填充大小（box-sizing更改其宽度，因为@ Vucko表示可以解决问题，但IE8不支持它。

input[type=text], [type=email], [type=password]{
  width: 284px; /* this width is your initial width - padding-left - padding-right; */
  padding:0 8px;
  border-radius: 50px;
  font-size: 15px;
  display: block;
}

<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">

Answer 2

只需将padding-left的样式更改为0

Answer 3

只需在输入中添加padding-left，检查小提琴。

padding-left: 10px;

DEMO

Answer 4

一种解决方案是使用text-indent: 5px：

input[type=text], [type=email], [type=password] {
    width: 300px;
    border-radius: 50px;
    font-size: 15px;
    display: block;
    text-indent: 5px;/*add text-indent*/
    outline: none;/*also remove outline*/
}

<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">

同时删除大纲。

在输入文本之前的空白区域

4 个答案: