如何样式化我的反应选择，当它被禁用(在CSS中)？
如何样式化我的反应选择，当它被禁用(在CSS中)？
提问于 2019-06-21 23:00:48
我想让我的选择框只是一个灰色的条，或者当它不可见时它是不可见的。我的CSS代码对我的元素有效，但是我不能对我的react-select元素做同样的事情。我尝试复制粘贴我用于标签的CSS，将标签替换为"select“，但没有任何反应
CSS：
// This is the code that makes my label elements gray boxes when disabled
label:disabled,
label[disabled] {
background: transparent;
border: none !important;
font-size: 0px;
background-color: #D8D8D8 !important;
}html/js：
<ControlLabel className="input-label">
Hopper Angle
<WithTooltip
tooltip={ <span>Select Hopper Angle below, or type in a custom value then click “create”.</span> }>
<span class="glyphicon glyphicon-question-sign"></span>
</WithTooltip>
</ControlLabel>
<br />
<CreatableSelect
name="hopper_angle"
value={{value: "hopper_angle" + this.state.hopper_angle.toString(), label: this.state.hopper_angle.toString()}}
className="react-select"
components={{ IndicatorSeparator }}
options={ data["hopper_angle"].map(d => ({label: d.toString(), value: "hopper_angle" + d.toString()})) }
onChange={this.handleChange}
disabled={this.state.disabled_hopper}
onCreateOption={this.handleCreateHopper}
/>回答 1
Stack Overflow用户
发布于 2019-06-21 23:12:37
className={`react-select${this.state.disabled_hopper ? ' disabled-class' : ''}`}在CSS中，您可以将样式添加到.disabled-class (或您选择的任何名称)，该样式仅在this.state.disabled_hopper为true时应用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56705914
复制相关文章
相似问题
腾讯云开发者
