Bootstrap 3: стилизация класса проверки ввода с помощью input-group-btn

Question

Использование Bootstrap 3.3.7. У меня есть форма с полем ввода номера, к которому прикреплены кнопки, чтобы дать возможность увеличивать / уменьшать кликабельную функцию.

Когда классы проверки (has-success, has-error) применяются к группе форм, правильные зеленые / красные контуры применяются к input-group-addon и к самому вводу. Контуры не применяются к кнопкам.

редактировать : уточнение! Я не пытаюсь "вручную" нацелить эти кнопки Bootstrap поддерживает визуальное указание действительных или недействительных полей, устанавливая .has-error / .has-success для .form-group. Однако плагины Bootstrap, такие как http://1000hz.github.io/bootstrap-validator, будут программно проверять входные данные на соответствие правилам проверки и, в случае неудачи или успеха, устанавливать .has-error / .has-success для группы форм. Таким образом, проблема заключается в некоторых отсутствующих правилах CSS, которые помещают зеленую / красную рамку вокруг кнопок, когда родительская группа форм имеет класс .has-success / .has-fault.

Я погуглил и проверил этот сайт, и не могу найти других сообщений именно с этой проблемой. Множество постов с input-group-addon, который работает нормально, но ни одного с вопросом кнопки. Ясно, что нужны какие-то классы или что-то, но не знаю, что и проблема происходит со стандартным BS3.

Следующее ответит на вопрос:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form>
  <div class="form-group has-feedback has-success">
    <label>Some input</label>
    <div class="input-group">
    <span class="input-group-addon">?</span>
      <input step="1" value="12" class="form-control no-webkit-spinner"
             name="somefield" type="number" max="9999" min="1" required>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">up</button>
        <button class="btn btn-default" type="button">down</button>
      </span>
    </div>
  </div>
</form>