css 带滚动条的输入字段

twh00eeo 于 2023-01-10 发布在其他

关注(0)|答案(3)|浏览(126)

我创建了一个input字段，用户可以在其中键入他们想要搜索的任何内容。我还创建了一个下拉列表，但列表超出了页面，只显示了很少的项目。
所以，我还想创建滚动条，以方便地访问所有的项目。代码如下所示，有近200个项目。
先谢谢你。

body {
  background: #2196F3;
  font-family: "calibri", sans-serif;
  color: #FAFAFA;
  margin: 0;
}

#head {
  margin: 0;
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid #1C2833;
}

.box {
  height: 30px;
  width: 250px;
  font-size: large;
  color: #17202A;
  border-radius: 5px;
  outline: none;
  border: none;
  padding: 12px;
}

<div>
  <p>
    <form id="form1">
      <input class="box" list="Country" name="Countries" placeholder=" Country">
      <datalist id="Country">
        <option value=" Afghanistan">
        <option value=" Albania">
        <option value=" Algeria">
        <option value=" American Samoa">
        <option value=" Andorra">
        <option value=" Angola">
        <option value=" Anguilla">
        <option value=" Antigua and Barbuda">
        <option value=" Argentina">
        <option value=" Armenia">
        <option value=" Aruba">
        <option value=" Australia">
        <option value=" Austria">
        <option value=" Azerbaijan">
        <option value=" Bahamas">
        <option value=" Bahrain">
        <option value=" Bangladesh">
        <option value=" Barbados">
        <option value=" Belarus">
        <option value=" Belgium">
        <option value=" Belize">
        <option value=" Benin">
        <option value=" Bermuda">
        <option value=" Bhutan">
        <option value=" Bolivia">
        <option value=" Bosnia and Herzegovina">
        <option value=" Botswana">
        <option value=" Brazil">
        <option value=" British Virgin Islands">
        <option value=" Brunei">
        <option value=" Bulgaria">
      </datalist>
    </form>
  </p>
</div>

css

来源：https://stackoverflow.com/questions/45287727/input-field-with-scrollbar

3条答案

按热度按时间

2wnc66cl1#

请检查此片段：

<form action="somepage.php" method="get">
	<input list="Country" name="Country">
	<datalist id="Country">
		<option value=" Afghanistan">
		<option value=" Albania">
		<option value=" Algeria">
		<option value=" American Samoa">
		<option value=" Andorra">
		<option value=" Angola">
		<option value=" Anguilla">
		<option value=" Antigua and Barbuda">
		<option value=" Argentina">
		<option value=" Armenia">
		<option value=" Aruba">
		<option value=" Australia">
		<option value=" Austria">
		<option value=" Azerbaijan">
		<option value=" Bahamas">
		<option value=" Bahrain">
		<option value=" Bangladesh">
		<option value=" Barbados">
		<option value=" Belarus">
		<option value=" Belgium">
		<option value=" Belize">
		<option value=" Benin">
		<option value=" Bermuda">
		<option value=" Bhutan">
		<option value=" Bolivia">
		<option value=" Bosnia and Herzegovina">
		<option value=" Botswana">
		<option value=" Brazil">
		<option value=" British Virgin Islands">
		<option value=" Brunei">
		<option value=" Bulgaria">
	</datalist>
	<input type="submit">
</form>

你的案子有什么不同吗？