Как правильно оформить контур Select2 на: фокус?

Я использую Select2 , чтобы стилизовать мои <select> коробки, но я не могу стилизовать принудительный контур, который Chrome применяет к стилю:



Проблема:
Введите описание изображения здесь



Я попробовал несколько строк (очень непрофессионально, !important) CSS-кода, но до сих пор я не нашел решения, вот что я сейчас делаю:



CSS: 



.select2 > *:focus, .select2:focus .select2 > *, .select2 {

    outline-width: 0px !important;

}


Чтобы исключить возможные проблемы, я определенно включаю этот CSS-файл, после моего обычного select2.css



Кроме того, скрипка была бы проблематичной, но я мог бы предоставить ее, если это действительно необходимо

603   4  

4 ответов:

Это, кажется, делает трюк: 

  <style>
    .select2-container *:focus {
        outline: none;
    }
  </style>

Вот отвес.

8  
2016-09-02 17:14:20

Это потому, что ни select2, ни chrome не используют свойство outline. Вот фактическое определение select:focus псевдо-элемента в select2 (+bootstrap): 

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Попробуйте изменить border и box-shadow вместо: 

.form-control:focus {
    border-color: unset;
    -webkit-box-shadow: none;
    box-shadow: none;
}
Надеюсь, это поможет, ваше здоровье.
1  
2016-09-02 17:17:23

Это работает для меня: 

&.select2-container--focus {
    outline: none;
}
1  
2017-09-16 01:05:44

Он, используя тень коробки, а не контур, смотрит на инспектора: 

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Так что вам нужно сбросить его

0  
2016-09-02 17:14:56

Comments

    Ничего не найдено.
Click here to cancel reply.