css 无法在输入内部对齐按钮

r6l8ljro 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(149)

我想创建一个包含按钮的输入，按钮上有一个向下的箭头，这样用户就可以单击它来打开或关闭列表。我无法将按钮放在输入中，我错过了什么？

.input-wrapper {
  position: relative;
}

.combobox-input {
  font-size: 16px;
  font-weight: normal;
  color: #4d4d4d;
  background: #ffffff;
  border: 1px solid #828995;
  height: 30px;
  padding: 4px 10px;
}

.combobox-arrow {
  display: inline-block;
  padding: 6px;
  border: none;
  background-color: white;
  background-image: url(...);
  width: 25px;
  height: 25px;
}

<div className="input-wrapper">
  <input className="combobox-input"/>
  <button className="combobox-arrow" ></button> 
</div>

css

来源：https://stackoverflow.com/questions/75375586/unable-to-align-the-button-inside-the-input

1条答案

按热度按时间

jgwigjjp1#

试试这个，看看它是否适合你的需要：（您可以根据需要修改代码段）

document.getElementById('caret').addEventListener('click', function() {
  // your code here if you want to add some logic
});

button#caret {
  border: none;
  background: none;
  position: absolute;
  top: 0px;
  right: 0px;
}

.input-wrap {
  position: relative;
  display: inline;
}

<label>List of places<br/>
  <div class="datalist-wrap">
    <div class="input-wrap">    
      <input id="placesText" type="text" name="places" list="places"/>
      <button id="caret"> &#9660;</button>
    </div>
    <datalist id="places">
      <label>Select from the list:
        <select name="places" id="select">
        <option value="A"></option>
        <option value="B"></option>
        <option value="C"></option>
        </select>
      </label>
    </datalist>
  </div>
</label>

赞(0）回复(0）举报 2023-02-10

我来回答

css 无法在输入内部对齐按钮

1条答案

相关问题

热门标签

最新问答