如何设置具有广告位“附加”属性的按钮的样式

Question

我正在使用Nuxt和Element UI构建Web应用程序。 现在，我正在创建如下搜索。

https://gyazo.com/644132bd6ab45714668281eed296940f

我想将按钮的背景颜色设为红色，但是，某种程度上，样式不适用于搜索按钮。 （按钮内有一个房间）

我该如何解决？

这是我的代码。

• SearchBox

<template>
  <div>
    <el-input type="text">
      <el-button slot="append" style="background-color: red;">Search</el-button>
    </el-input>
  </div>
</template>

Answer 1

元素UI按钮具有el-button类，您可以查看该元素。

不建议更改在el-input上附加/添加的元素的背景颜色，因为如果更改按钮的背景颜色，它将失去它的附加“效果”，因此只向您显示按钮和输入保持在一起。但是，尽管如此，尽管如此，仍请参考el-button类：

.el-button {
    background: #f00;
}

P.S：您可能需要用任何div包裹该按钮，并引用该div内部的按钮