Как программно переопределить select2 css при отправке формы? - PullRequest
Новая
       8

Как программно переопределить select2 css при отправке формы?

0 голосов
/ 30 января 2019

Я пытаюсь выделить select2, которые не заполнены, когда пользователь пытается отправить форму.Я не могу понять, как переопределить мой ранее существовавший стиль CSS из загрузки документа.

Вот моя попытка jquery: 

var $requiredUnfilledItems = $(".required:not(.filled)");
if ($requiredUnfilledItems.length > 0) {
  $requiredUnfilledItems.each( function(){
    $(this).addClass('warning-border');
  });
}

и мой CSS для .warning-border: 

.warning-border { 
    outline: none !important;
    border-color: red !important;
    box-shadow: 0 0 10px red !important;
}

, который пытается переписать это: 

.select2-container--default .select2-selection--single {
    width: 100%;
    padding-left: 4px;
    height: 100%;
    border: thin solid lightgray;
    height: 30px;
}

Но это не работает.Я также попробовал это (что может показывать, что я еще не освоил css): 

.warning-border, .select2-container.warning-border { 
    outline: none !important;
    border-color: red !important;
    box-shadow: 0 0 10px red !important;
}

Помощь?

1 Ответ

0 голосов
/ 30 января 2019

Мой совет - не использовать! Важно, но поймите, как вместо этого каскады CSS ... в Интернете есть лучшие ресурсы для этого, чем я -

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

В моемПример фрагмента, который я сделал, позволил себе создать обработчик JQuery, чтобы текстовое поле ввода знало, когда оно было заполнено, и добавляло (или удаляло) заполненный класс к себе onkeyup - вы должны добавить обработчик для этого где-нибудь, если он уже не где-то запускаетсяв вашем коде (я думаю, вы уже делаете).

Я добавил эти комбинации классов в CSS, чтобы они не выделялись красным цветом (внизу таблицы стилей во фрагменте).

Вы использовали border-color, но фактическое свойство, которое вы хотели переопределить, было сокращено в CSS, поэтому я переключил их, чтобы они все сокращенно и гарантированно влияли на одни и те же свойства.Я не могу вспомнить, как это работает на моей голове, но это могло быть проблемой ... 

$( "input[type=text]" ).keyup(function() {
  if(this.value != '') $(this).addClass('filled');
  else
    $(this).removeClass('filled')
});

$("form").submit(function(){
  var $requiredUnfilledItems = $('.required:not(.filled)'); 
  if ($requiredUnfilledItems.length > 0) 
  {$requiredUnfilledItems.each( function(){$(this).addClass('warning-border');
   });
  }
  else { alert("You entered in " + this.name.value); }
  return false;})
.warning-border { 
    outline: none !important;
    border: thin solid red;
    box-shadow: 0 0 10px red;
}

.warning-border, .select2-container.warning-border { 
    outline: none !important;
    border: thin solid red;
    box-shadow: 0 0 10px red;
}

.warning-border.filled, .select2-container--default .select2-selection--single {
    width: 100%;
    padding-left: 4px;
    height: 100%;
    border: thin solid lightgray;
    height: 30px;
    box-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" onsubmit="">
<input id="name" type="text" class="required filled" value="Name"/>
<input type="submit">
</form>
...