Question

我更改了按钮的bootstrap css类，我更改了按钮颜色，字体大小和字体颜色等。

但是当我按下按钮并按住鼠标时，它会改变颜色。

我将颜色设置为绿色，但是当我单击按钮并按住鼠标时，它会变为蓝色。

这是按钮的css代码

.btn-outline-primary{
  width: 220px;
  background: #A4D555; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.btn-outline-primary:hover{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

.btn-outline-primary:focus{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

.btn-outline-primary:active{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

Answer 1

您必须添加!important以防止通过引导程序定义覆盖

＆＃13;

.btn-outline-primary{
  width: 220px;
  background: #A4D555!important; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.btn-outline-primary:hover{
  background: #A4D555!important;
  outline: none;
  box-shadow: none!important;
}

.btn-outline-primary:focus{
  background: #A4D555!important;
  outline: none;
  box-shadow: none !important;
}

.btn-outline-primary:active{
  background: #A4D555!important;
  outline: none;
  box-shadow: none !important;
}

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-outline-primary">Primary</button>

＆＃13;

＆＃13;

编辑您的评论：

但点击并按
时仍有蓝色边框/轮廓

设置

box-shadow: none!important;

Answer 2

这是我的解决方案，

既然你说你想要评论中的实体按钮，

我使用的是align-self: center;类，用于实体按钮，而不是LOAD DATA LOCAL INFILE '//homeX/username/public_html/activator/uploadedCSV/20180603064917_csvtoimport.csv' IGNORE INTO TABLE `csv_import_temp` FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"' ESCAPED BY '\\' LINES TERMINATED BY '' IGNORE 1 ROWS ( contact_email, contact_email );

＆＃13;

btn-primary

＆＃13;

btn-outline

＆＃13;

按下Bootstrap 4按钮改变颜色

2 个答案: