2014-10-24 3 views
1

Я использую Bootstrap: Как удалить фон, границу и не разрешенный указатель в поля формы, когда отключено? Без изменения же на других формах отключенными поля ...Как удалить фон, границу и недопустимый указатель из заблокированного ввода

Я попробовал это, без какого-либо успеха (с использованием AngularJS):

HTML:

<input type="text" ng-disabled="toggle" ng-class="{'no-extras': toggle}" class="form-control" id="name" placeholder="Name" /> 

И CSS:

.no-extras { 
    border: 0; 
    box-shadow: none; 
    background-color: white; 
    cursor: default; 
} 

См. Здесь код http://plnkr.co/edit/1AuszJ?p=preview

ответ

3

Изменение содержимого таблицы стилей с этим:

.no-extras { 
    border: 1 !important; 
    box-shadow: none !important; 
    background-color: white !important; 
    cursor: default !important; 
} 

Вы дали границу, как 0, что является неправильным. Не изменяйте файл bootstrap.css, так как он изменит все отключенные поля. Кроме того, добавление! Important дает приоритет вашему стилю по стилю по умолчанию, предоставляемому bootstrap.

+0

Не то, чтобы у меня есть ссылка, но я уверен, что прочитал несколько мест, которые следует использовать «важно», - это то, что вам следует избегать («быстрый и грязный» подход, но я не уверен, когда это будет хороший подход к использованию! важно). Итак, если есть путь без использования! важно? – EricC

+0

Вот одна рекомендация, рекомендующая избегать использования! Важно, если вам действительно не нужно: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when- to-use-it/Я действительно мало знаю css, но мое чувство кишки состоит в том, что это, возможно, не тот случай, когда мне действительно нужно использовать! важно. Но, с другой стороны, я могу ошибаться! Я? – EricC

+0

Хорошо. Я буду принимать этот ответ, так как он решает вопрос, и это лучше, чем изменение файла bootstrap.css. И я сделаю еще один вопрос о том, как избавиться от важности. Спасибо всем за ваши ответы! – EricC

1

Быстрый подход: вы можете использовать! важный тэг в вашем стиле, чтобы переопределить стиль бутстрапов.

Подход к чистке: устраните стиль из таблицы стилей Bootstrap (щелкните правой кнопкой мыши в Chrome/Firefox и проверьте свое поле ввода, чтобы найти код).

То, что я нашел на линии 2387 в вашем bootstrap.css:

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 
cursor: not-allowed; 
background-color: #eee; 
opacity: 1; 
+0

Подход без! Важно, но, к сожалению, я уверен, что изменение самого bootstrap.css не рекомендуется! Кроме того, он не выполняет вторую половину моего вопроса (мне нужно это только для одной формы, а не как общее изменение для всех форм) ... – EricC

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