Question

使用语义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样式表中的背景颜色，但这没有用。有人可以给我提示吗？

Answer 1

如果您想提供一些基本的颜色，则语义ui已经为您提供了这些类。您可以添加类red，orange，yellow，olive，green，teal，blue，{{1 }}，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

如果您想提供自定义颜色this，则问题已经有一些答案。

就您的问题而言，难度更大。您只需要更改轮廓和文本颜色。如果检查按钮，他们将使用属性<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>来设置颜色和阴影（是的，他们使用box-shadow属性而不是border属性来创建边框）。因此，您也将不得不使用!important。

!important

#blah input.ui.blue.big.basic.button {
  box-shadow:0px 0px 0px 1px #8f3f9f inset !important;
  color: #8f3f9f !important;
}

想法是您必须使其比语义UI属性更具体。

如何自定义语义用户界面按钮以更改背景颜色

1 个答案: