如何自定义更改背景颜色的语义UI按钮

问题描述 投票:0回答:1

使用语义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样式表中的背景颜色,但这不起作用。有人能给我一个暗示吗?

css css-selectors semantic-ui
1个回答
2
投票

如果你想提供一些基本颜色,语义ui已经为你提供了类。你可以添加类redorangeyellowolivegreentealbluevioletpurplepinkbrowngreyblack按钮。

<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属性更具体。

© www.soinside.com 2019 - 2024. All rights reserved.