HTML <datalist>行内CSS不生效，如何修改其宽高？

哎，这个问题我太熟了——<datalist> 是浏览器原生的下拉提示控件，但它的样式渲染权基本被浏览器攥在手里，直接给它加 height 和 width 大多时候根本不生效。原因很简单：浏览器把它当作系统级控件处理，不是普通的DOM元素，很多CSS属性对它无效。

下面给你两种可行的解决思路，看你需求选：

1. 针对原生datalist的折中方案（仅部分生效） #

调整宽度：匹配input的宽度 #

原生datalist的下拉面板宽度默认会和绑定的<input>保持一致，所以你不用给datalist设置width，直接给input设置宽度就行：

<input type="text" list="dose" style="width:153px; height:34px; box-sizing: border-box; padding: 0 8px;" />
<datalist id="dose">
  <option>1+1+1</option>
  <option>1+1+0</option>
  <option>1+0+0</option>
  <option>0+1+0</option>
  <option>0+0+1</option>
  <option>0+1+1</option>
  <option>1+0+1</option>
</datalist>

这里加box-sizing: border-box是为了让height包含padding和边框，避免input实际高度超出34px。

关于高度：原生datalist无法直接设置 #

原生下拉面板的高度由浏览器自动控制，比如Chrome最多显示7个选项，超出会自动加滚动条。你没办法用CSS强制设置它的height——哪怕写了也会被浏览器忽略。如果必须固定高度，只能走下面的自定义方案。

2. 自定义下拉组件（完全可控样式） #

想要100%控制宽高、样式，最好的办法是放弃原生datalist，用HTML+CSS+JS模拟一个。下面是现成的示例代码，直接能用：

<!-- 自定义下拉容器 -->
<div class="custom-dose-wrapper">
  <input type="text" class="dose-input" placeholder="选择剂量" />
  <!-- 模拟datalist的选项列表 -->
  <ul class="dose-options">
    <li>1+1+1</li>
    <li>1+1+0</li>
    <li>1+0+0</li>
    <li>0+1+0</li>
    <li>0+0+1</li>
    <li>0+1+1</li>
    <li>1+0+1</li>
  </ul>
</div>

<style>
/* 容器定位，用来托住下拉列表 */
.custom-dose-wrapper {
  position: relative;
  width: 153px;
}

/* 输入框样式，完全自定义 */
.dose-input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

/* 下拉选项列表，默认隐藏 */
.dose-options {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 180px; /* 这里就是你要的自定义高度 */
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none;
}

/* 选项样式 */
.dose-options li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.dose-options li:hover {
  background-color: #f5f5f5;
}
</style>

<script>
// 绑定交互逻辑
const input = document.querySelector('.dose-input');
const optionsList = document.querySelector('.dose-options');
const options = optionsList.querySelectorAll('li');

// 点击输入框显示/隐藏选项
input.addEventListener('click', () => {
  optionsList.style.display = optionsList.style.display === 'block' ? 'none' : 'block';
});

// 点击选项填充输入框并隐藏列表
options.forEach(option => {
  option.addEventListener('click', () => {
    input.value = option.textContent;
    optionsList.style.display = 'none';
  });
});

// 点击页面其他地方隐藏列表
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-dose-wrapper')) {
    optionsList.style.display = 'none';
  }
});
</script>

这个方案的好处是：

• 完全自定义宽高、颜色、阴影等样式
• 交互逻辑可以自己扩展（比如搜索过滤选项）
• 所有浏览器表现一致，没有兼容性问题

总结一下：如果只是要调整宽度，给input设置就行；如果要控制高度或者统一样式，直接用自定义组件更靠谱。

内容的提问来源于stack exchange，提问作者Abdullah Al Noman