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

Question

我的应用程序中有多个表。 （纯 html、css 等，除了 jQuery 没有框架）

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

一段时间以来，我一直在使用下面示例中的内容。

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

问题是箭头的固定宽度为 20px，高度为 20px，但输入字段的宽度需要与 td 的宽度减去箭头的宽度（20 px）一样宽。将输入的宽度设置为百分比不起作用，因为当 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/

所用颜色仅供参考。

谁能帮我解决这个问题？我很茫然，谷歌不是我和这个 atm 的朋友......

Answer 1

尝试提供输入 padding-right: 20px;，如果您将输入相对位置和向下箭头绝对位置与 right: 0，将停止用户在箭头下打字

您可能不得不四处摆弄以确保没有拾取默认边距或填充。