2015-02-10 4 views
0

Bootstrap включает прямоугольник вокруг флажка в этом jsFiddle Example. Я неправильно использовал разметку или работает?Почему bootstrap включает прямоугольную рамку вокруг моего флажка в этой панели?

<form class="form-horizontal" role="form"> 
    <div class="form-group form-group-lg"> 
     <label for="cbLabel" class="col-sm-3 control-label">Label:</label> 
     <div class="col-sm-3"> 
      <input type="checkbox" id="cbLabel" class="form-control" /> 
     </div> 
    </div> 
</form> 
+0

попытка удалить класс в окошке. это проблема для вас? –

+0

Я попытался удалить класс, но он не сработает. Мне нужен флажок, чтобы оставаться того же размера и оставаться в том же положении. –

+2

К сожалению, класс 'form-control' - это именно то, что вызывает вашу проблему. Обратите внимание, что ни один из флажков в документации не использует этот класс: http://getbootstrap.com/css/#forms – MattD

ответ

1

Добавить пользовательский класс в form-control элемента (.fix в моем примере) и некоторого пользовательского стиль переопределения стиля Bootstrap в.

.fix { 
-webkit-box-shadow: none; 
box-shadow: none; 
} 

.fix:focus { 
-webkit-box-shadow: none; 
box-shadow: none; 
} 

HTML

<input type="checkbox" id="cbLabel" class="form-control fix"> 

Пример: http://www.bootply.com/61qJqP5whr

+0

Он избавляется от тени, но он вводит еще одну проблему: пользователь может щелкнуть довольно далеко от окна и по-прежнему проверять флажок. В зависимости от того, для чего используется флажок, может быть довольно опасно иметь такую ​​большую область, чтобы проверить этот флажок. – MattD

+0

так и было, но это было более очевидно. вы могли бы, вероятно, отключить ярлык, как-то, но не уверен, а не часть вопроса OP –

Смежные вопросы