将向下箭头放在表内的输入内

Question

我的应用程序中有多个表。(纯html, css等，除了jQuery没有框架)

在这些表中的一些td中，我有输入字段。在一些输入中，我想放置一个向下指向的箭头，这样用户就知道他们可以点击它来获得一个自定义的下拉列表。

有一段时间了，我一直在使用下面这个例子中的东西。

因此，用户需要看到一个输入字段，其右侧有一个向下的箭头。此外，用户在输入字段中填写的文本不能位于箭头的下方。

问题是，箭头有一个固定的宽度为20px，高度为20px，但输入字段需要与td的宽度减去箭头的宽度(20px)一样宽。将输入的宽度设置为百分比是不起作用的，因为当td的大小变化时，在输入和箭头之间会有一个空白。

CSS:

.col1{
width: 300px;
background-color: yellow;
}
.col2{
width:300px;
background-color: lightgrey
}

.col1 input{
width: 100%;
}
.ArrowBox {
position: relative;
right: 0px;
width: 20px;
height: 20px;
display: inline-block;
background-color: red;
}


.ArrowIcon {
position: relative;
top: -3px;
left: 4px;
width: 10px;
height: 10px;
border: solid white;
border-width: 0 1px 1px 0;
display: inline-block;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); 
}

HTML:

<table>
<tr>
<td class="col1">
<input type="text" value="" class="input1">
<i class="ArrowDownBox">
<i class="InputArrowDownIcon"></i>
</i>
</td>

<td class="col2">Line 1, Column 2</td>
</tr>
<tr>
<td  class="col1">
<input type="text" value="" class="input2">
<i class="ArrowDownBox">
<i class="InputArrowDownIcon"></i>
</i>
</td>

<td class="col2">Line 2, Column 2</td>
</tr>
</table>

我在这里放了一个简单的例子:

https://jsfiddle.net/j6ocL702/

使用的颜色仅供举例使用。

有谁能帮我一下吗?我不知道怎么用这台自动取款机，而且谷歌也不是我的朋友。

Answer 1

尝试输入padding-right: 20px;，如果您将输入位置设置为相对而下箭头为right: 0

，则会阻止用户在箭头下键入。你可能需要摆弄以确保默认的边距或内边距没有被选中。