使用语义UI我有这个按钮。
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/button.css" rel="stylesheet"/>
<input class="ui blue big basic button" type="submit">
问题是我在更改此按钮的背景颜色时遇到问题,我尝试在按钮上添加ID并更改CSS样式表中的背景颜色,但这不起作用。有人能给我一个暗示吗?
如果你想提供一些基本颜色,语义ui已经为你提供了类。你可以添加类red
,orange
,yellow
,olive
,green
,teal
,blue
,violet
,purple
,pink
,brown
,grey
,black
按钮。
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/button.css" rel="stylesheet"/>
<button class="ui red button">Red</button>
您还可以添加类basic
以仅使按钮轮廓着色。
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/button.css" rel="stylesheet"/>
<button class="ui red basic button">Red</button>
如果你想提供自定义颜色this问题已经有一些答案。
在你的问题中,它更难。您只需要更改轮廓和文本颜色。如果你检查按钮,你将使用属性!important
颜色和box-shadow(是的,他们使用box-shadow属性而不是border属性来创建边框)。所以你也必须使用!important
。
#blah input.ui.blue.big.basic.button {
box-shadow:0px 0px 0px 1px #8f3f9f inset !important;
color: #8f3f9f !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/button.css" rel="stylesheet"/>
<div id="blah">
<input class="ui blue big basic button" type="submit">
</div>
这个想法是你必须使它比语义UI属性更具体。