Let’s break down how to tweak that question mark button’s solid background style without messing up other Bootstrap elements:

1. Add a Unique Class to Target the Button #

First, give your button a custom class (like custom-question-btn) so we can style it specifically:

<ul class="nav navbar-nav navbar-right">
  <li>
    <a href="#">Cost</a>
  </li>
  <li>
    <a href="customerCenter.php">Customer</a>
  </li>
  <li>
    <button type="button" class="btn btn-default custom-question-btn">
      <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
    </button>
  </li>
</ul>

2. Write Custom CSS to Override the Background #

Add this CSS to your stylesheet (make sure it loads after Bootstrap’s CSS to ensure it takes priority):

/* Base button style */
.custom-question-btn {
  background-color: #your-hex-color; /* Replace with your desired solid color */
  border-color: #matching-border-color; /* Match or complement the background */
  color: #icon-text-color; /* e.g., white if your background is dark */
}

/* Hover state for interactivity */
.custom-question-btn:hover {
  background-color: #darker-shade-of-your-color; /* Slightly darker for hover feedback */
  border-color: #darker-border-shade;
  color: #icon-text-color;
}

/* Focus state (when button is clicked/selected) */
.custom-question-btn:focus {
  background-color: #your-hex-color;
  border-color: #matching-border-color;
  box-shadow: 0 0 0 0.2rem rgba(your-color-rgb-values, 0.25); /* Optional: Bootstrap-style focus ring */
}

Example: Solid Blue Button with White Icon #

Here’s a concrete example if you want a blue button:

.custom-question-btn {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

.custom-question-btn:hover {
  background-color: #0056b3;
  border-color: #0056b3;
  color: #fff;
}

.custom-question-btn:focus {
  background-color: #0056b3;
  border-color: #0056b3;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

Quick Alternative: Use Bootstrap’s Predefined Classes #

If you don’t need a fully custom color, swap btn-default for one of Bootstrap’s built-in button classes like btn-primary, btn-success, or btn-info:

<button type="button" class="btn btn-primary">
  <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</button>

This gives you a pre-styled solid button with Bootstrap’s default hover/focus states.

内容的提问来源于stack exchange，提问作者stack