求助：页面加载时修改带内联样式的HTML多选表单字段高度

为什么你的CSS修改没生效？ #

目标元素的height是通过内联样式（style="height: 76px;"）设置的，内联样式的优先级远高于普通类选择器（.axios-form-multi-select），所以你写的类样式会被内联样式覆盖，导致不生效。

可行的解决办法 #

方法1：用!important提升样式优先级 #

给CSS规则添加!important，强制覆盖内联样式：

.axios-form-multi-select {
  height: 150px !important;
}

方法2：使用更高优先级的选择器 #

结合元素ID、属性等构建优先级更高的选择器，比如：

#uniqName_4_22.axios-form-multi-select {
  height: 150px;
}

或者利用元素的data-auto-test-id属性：

select[data-auto-test-id="webCustomPropertyValue(DOCUMENT TYPE 12)"] {
  height: 150px;
}

这类选择器的优先级足以覆盖内联样式。

方法3：通过JavaScript修改内联样式 #

如果CSS方式受限，可直接用JS修改元素的内联样式：

document.getElementById('uniqName_4_22').style.height = '150px';

关于修改方式的可行性 #

你最初的类选择器修改方式本身是可行的，只是因为内联样式的优先级冲突才未生效，解决优先级问题后就能正常起作用。

内容的提问来源于stack exchange，提问作者Majdi Agraib