Bootstrap 5 selectpicker меняет цвет фона
В нашей стране стандартом является то, что каждое поле ввода должно быть окрашено в светло-золотисто-желтый цвет. Я не могу установить цвет фона selectpicker в Bootstrap 5.
Это мой код:
Я также приложил использованный мной bootstrap/jquery.
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" >
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
<!--jQuery-->
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel = "stylesheet"/>
<!-- Bootstrap 5 Font Icon CSS -->
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!--Icon Scout-->
<link rel = "stylesheet" href = "https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<!--Bootstrap/jQuery Select picker-->
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css"/>
<!--<link rel = "stylesheet" href = "home_test.css">-->
<link rel = "stylesheet" href = "home.css">
<!--scripts -->
<script src = "https://code.jquery.com/jquery-3.7.1.js"></script>
<script src = "https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
<div class = "container" style = "overflow:visible;">
<select name = "instructor_a" id = "" style = "background-color: lightgoldenyellow;" class = "selectpicker" data-live-search = "true" data-size = "3" title = "講師選択">
<?php
$query_instructor = "SELECT name_ FROM users
where userlevel = '2'";
$stmt_instructor = $pdo->prepare($query_instructor);
//$stmt_interviewee->bindParam(":training_id", $training_id);
$stmt_instructor->execute();
$result_query_instructor = $stmt_instructor->fetchAll();
foreach ($result_query_instructor as $instructors) {
echo "<option value ='$instructors[name_]'";
if ($instructor_a === $instructors["name_"]) {
echo "selected";
}
echo">$instructors[name_]</option>";
}
?>
</select>
</div>Я пробовал добавить встроенный стиль: style = "background-color:lightgoldenyellow;", но безуспешно.
Я также попробовал добавить класс в selectpicker, например class="instructor-select",
Затем в свой CSS-файл я включил ".instructor-select {background-color:lightgoldenyellow; }", но безуспешно.
Как мне переопределить стиль выбора выбора начальной загрузки?
1) Используйте допустимое имя цвета. 2) Предоставьте минимальный воспроизводимый пример , позволяющий воспроизвести проблему (читай «минимальный и воспроизводимый» — нам не нужны более 10 различных и несвязанных между собой библиотек CSS и JS + некоторый PHP-код посередине). ) 3) Вы отметили свой вопрос тегом bootstrap-5 но библиотека bootstrap-select предназначена для Bootstrap 4?
@DiegoD Я попробовал встроенный стиль «lightgoldenrodyellow», но он все еще не работает. Я также попробовал это в CSS, все еще не работает.
@newbiecoder У меня был ответ, который я удалил, потому что он показался излишним... в любом случае, поскольку вы ответили, что не можете применить данное предложение, я удалил весь ответ, имея внутри рабочую демонстрацию
@MrUpsidown Просто потому, что для Bootstrap 5 не существует библиотеки выбора начальной загрузки. Я включил другие библиотеки, потому что это могло быть причиной проблемы. И к вашему сведению, хоть библиотека и для Bootstrap 4, в Bootstrap 5 она каким-то образом поддерживается, но ее остановили. Функционал работает хорошо, просто хочется стандартизировать цвет.
@DiegoD Тем не менее, спасибо за предложение.
@newbiecoder, что ты имел в виду под still? у тебя «все еще» есть проблемы? вы пробовали живой фрагмент? в чем дело? Можете ли вы добавить комментарий под конкретным ответом, касающимся проблемы, чтобы я мог лучше понять?
@DiegoD Я увидел твой ответ сейчас. ЭТО работает отлично!! Большое спасибо! Спаситель жизни! Извините, я не смог проголосовать за ваш ответ, недостаточно репутации, но он был сохранен.
@newbiecoder ради записей я воспользовался возможностью доработать дополнительные детали стиля... все это объяснено в одном правиле CSS, используемом с 6 различными селекторами.
Большое спасибо. Это очень помогло. Основываясь на 6 различных селекторах, которые вы добавили, я также пытаюсь изменить цвет на «цвет фона: серый», когда он отключен. Я пробовал несколько кодов, таких как: .bootstrap-select > .dropdown-toggle.bs-placeholder:disabled {background-color: grey !important; } В любом случае, я постараюсь задать другой вопрос, когда он будет доступен через 4 дня. Большое спасибо @DiegoD
@newbiecoder, что ты подразумеваешь под отключением? если вы отключите <select> добавление атрибута disabled в тег html, весь элемент управления будет окрашен в серый цвет и будет иметь курсор, запрещающий любое дальнейшее взаимодействие с раскрывающимся списком. Я улучшил свой ответ, добавив отключенный dd в качестве ссылки.
Ответы 3
Используйте селектор CSS .bootstrap-select > .dropdown-toggle и установите фон. Итак, в вашем случае это будет:
.bootstrap-select > .dropdown-toggle {
background-color: lightgoldenyellow;
}
Хотя, как упомянул Диего Д., lightgoldenyellow недопустимый цвет, поэтому это также может вызвать у вас проблемы.
Это также правильно и аналогично ответу Диего Д., но следует добавить «! Важно».
Я думаю, ваша главная проблема заключалась в том, что вы использовали неправильный идентификатор цвета, который вы хотели адресовать. На самом деле допустимое название цвета, близкое к тому, которое вы использовали, — lightgoldenrodyellow.
Теперь, когда это исправлено, вам нужно стилизовать следующее:
.bootstrap-select .dropdown-toggle- раскрывающийся список.bootstrap-select > .dropdown-menu li a- все варианты раскрывающегося списка.bootstrap-select > .dropdown-toggle:focus- раскрывающийся список: фокус.bootstrap-select > .dropdown-toggle:hover- раскрывающийся список: наведите курсор.bootstrap-select > .dropdown-menu li.active a- значение раскрывающегося списка.bootstrap-select > .dropdown-menu li a:active— вариант, выбранный среди многих
Кроме того, ничего не стоит, если без каких-либо дополнительных стилей, когда <select> имеет атрибут disabled, раскрывающийся список будет стилизован с серым фоном и cursor, запрещающим любое дальнейшее взаимодействие.
Вот полный пример (включая отключенный раскрывающийся список):
.bootstrap-select > .dropdown-toggle, /* dropdown box */
.bootstrap-select > .dropdown-menu li a, /* all dropdown options */
.bootstrap-select > .dropdown-toggle:focus, /* dropdown :focus */
.bootstrap-select > .dropdown-toggle:hover /* dropdown :hover */
{
background-color: lightgoldenrodyellow;
}
/* dropdown - option selected - shown as the value of the dropdown */
.bootstrap-select > .dropdown-menu li.active a{
font-weight: bold;
color: black;
}
/* dropdown - option selected - shown among the other available options */
.bootstrap-select > .dropdown-menu li a:active {
color: red;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<!--jQuery-->
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel = "stylesheet" />
<!-- Bootstrap 5 Font Icon CSS -->
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!--Icon Scout-->
<link rel = "stylesheet" href = "https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<!--Bootstrap/jQuery Select picker-->
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" />
<!--<link rel = "stylesheet" href = "home_test.css">-->
<link rel = "stylesheet" href = "home.css">
<!--scripts -->
<script src = "https://code.jquery.com/jquery-3.7.1.js"></script>
<script src = "https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
<br>
<div class = "container" style = "overflow:visible;">
<select
name = "instructor_a"
id = ""
class = "selectpicker"
data-live-search = "true"
data-size = "3"
title = "講師選択"
>
<option value = "1">bogus1</option>
<option value = "2">bogus2</option>
<option value = "3">bogus3</option>
</select>
</div>
<hr>
<div class = "container" style = "overflow:visible;">
<select
name = "instructor_b"
id = ""
class = "selectpicker"
data-live-search = "true"
data-size = "3"
title = "講師選択 - (disabled)"
disabled
>
<option value = "1">bogus1</option>
<option value = "2">bogus2</option>
<option value = "3">bogus3</option>
</select>
</div>
<hr>Я улучшил ответ: используя более сфокусированные селекторы; правильно объясняя, что делает каждый селектор; включая демонстрацию отключенного раскрывающегося списка
Используйте форму выбора класса начальной загрузки и переопределите ее желаемым цветом.
.form-select ,
.form-select:focus,
.form-select:active,
.form-select.show {
background-color: #FFC000 !important;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<select class = "form-select" aria-label = "Default select example">
<option selected>Open this select menu</option>
<option value = "1">One</option>
<option value = "2">Two</option>
<option value = "3">Three</option>
</select>
вместо этого вы пытались использовать
lightgoldenrodyellow? значение цвета, которое вы используете, недействительно