Bootstrap3のinput-group-addonの背景色をbtn-primaryのようにしたい

Bootstrap3日本語リファレンスを参考にテキストフォーム等を作成しています．
フォーム左にテキストを配置したのですが，配置したテキストの背景色を変更する方法がわかりません．

HTML
1<div class="input-group">
2	<span class="input-group-addon">ユーザー名</span>
3	<input type="text" class="form-control" placeholder="太郎">
4</div>

上記は現在記載しているコードです．input-group-addonの部分の背景色の変更方法を教えて下さい．

行動規範の内容に同意します

回答1件

ベストアンサー

input-group-addonクラスの背景色を変更したいならば、background-colorプロパティの値を上書きすれば良いので、以下のように行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        .input-group-addon {
9            background-color: #faf;
10        }
11    </style>
12</head>
13<body>
14<div class="input-group">
15    <span class="input-group-addon">ユーザー名</span>
16    <input type="text" class="form-control" placeholder="太郎">
17</div>
18<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
19<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
20</body>
21</html>