Стилизоваць select в Catselector
| pronchak |
|
|---|---|
|
Доброго времени суток, Всем! В файле projects.list.tpl вместо {SEARCH_CAT} вставил {PHP.c|catselector_selectbox('projects', $this, 'c')}. Когда было {SEARCH_CAT} класс select стилизовался как угодно, после замены, что бы я не делал со стилями css не могу убрать стандартное обрамление и стрелку раскрывающегося списка. {PHP.c|catselector_selectbox('projects', $this, 'c')} заключил в блок div и приписал class="c-select" и все равно ни чего не изменилось ниже сам код css:
.c-select {
display: inline-block;
max-width: 100%;
-webkit-appearance: none;
padding: .375rem 1.75rem .375rem .75rem;
padding-right: .75rem \9;
color: #55595c;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
background-image: none \9;
-webkit-background-size: 8px 10px;
background-size: 8px 10px;
border: 1px solid #ccc;
-moz-appearance: none;
}
.c-select:focus {
border-color: #51a7e8;
outline: none;
}
.c-select::-ms-expand {
opacity: 0;
}
Вот ссылка на скрин селекта, смотреть "Виды работ": https://ibb.co/js2AQ7 Помогите чем кто может. P.S. Тема (шаблон) Masters. |
| Edward |
|
|---|---|
|
Так вы откройте консоль и увидите, что к селекту не присвоен ни class ни id. Попробуйте так:
.c-select select[name=c] {
display: inline-block;
max-width: 100%;
-webkit-appearance: none;
padding: .375rem 1.75rem .375rem .75rem;
padding-right: .75rem \9;
color: #55595c;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
background-image: none \9;
-webkit-background-size: 8px 10px;
background-size: 8px 10px;
border: 1px solid #ccc;
-moz-appearance: none;
}
.c-select select[name=c]:focus {
border-color: #51a7e8;
outline: none;
}
.c-select select[name=c]::-ms-expand {
opacity: 0;
}
Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba |
| pronchak |
|
|---|---|
|
Тоесть просто добавить select[name=c] Если так, то ни чего не вышло. Но всеравно большое спасибо Вам за помощь. |
| Edward |
|
|---|---|
|
где не вышло? https://jsfiddle.net/EddG/aqa336aa/4/ Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba |
| pronchak |
|
|---|---|
|
По вашему примеру получается селект в селекте. Ведь список выводится через {PHP.c|catselector_selectbox('projects', $this, 'c')}. |
| Kopusha |
|
|---|---|
|
Я давно привязал библиотеку select2 и она всюду работает |
| pronchak |
|
|---|---|
|
К сожалению, я не гуру. Подскажи как это реализовать. |
| Edward |
|
|---|---|
#43297 pronchak: какой еще select в select'е ? Вы на первый пример пример смотрели? Я там 2 селекта для сравнения сделал, чтобы показать, что стили работают. https://jsfiddle.net/EddG/aqa336aa/4/ А вы вот здесь https://jsfiddle.net/aqa336aa/6/ зачем то в севисе jsfiddel пытаетесь воткнуть функцию cotonti. Конечно там она не будет работать. Учите основы хотя бы сначала, как CSS работает. Добавлено 5 минут спустя: Файл шаблона
<div class="c-select">
{PHP.c|catselector_selectbox('projects', $this, 'c')}
</div>
файл стилей css:
.c-select select[name=c] {
display: inline-block;
max-width: 100%;
-webkit-appearance: none;
padding: .375rem 1.75rem .375rem .75rem;
padding-right: .75rem \9;
color: #55595c;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
background-image: none \9;
-webkit-background-size: 8px 10px;
background-size: 8px 10px;
border: 1px solid #ccc;
-moz-appearance: none;
}
.c-select select[name=c]:focus {
border-color: #51a7e8;
outline: none;
}
.c-select select[name=c]::-ms-expand {
opacity: 0;
}
и все работает. Не видите изменений - чистите кэш котонти и обновите страницу через cotnrol+f5 Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba Відредаговано: Edward (03.03.2018 08:46, 7 років тому) |
| pronchak |
|
|---|---|
|
С большим уважением к Вашим знаниям! Я все так и делал с первого Вашего сообщения и сейчас все имено так и прописано, но ни какого результата.
Добавлено 10 минут спустя: Вот код из консоли: <div class="c-select"> <select name="c" onchange="catselector_changeselect(this, 'projects', 'c', 'W', '1');"><option value="">Виды работ</option></select> </div>
Відредаговано: pronchak (03.03.2018 09:08, 7 років тому) |
| Edward |
|
|---|---|
|
Дед мороз существует, но в эти чудеса я не верю. Проверяйте, что name="c" написано латиницей, смотрите в консоли, какие стили и откуда применяются. Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba |
| pronchak |
|
|---|---|
|
Дед мороз и в правду существует! Но это не меняет моей глупости. Все дело в том, что стили я прописывал в bootstrap.css, а к странице подключен bootstrap.min.css. Все работает, спасибо огромное. |
| DenDevin |
|
|---|---|
|
Сколько танцев над одним классом. А не проще было просто в в файле catselector.functions.php данного плагина просто добавить класс. В строчке:
$result .= " к селекту свой класс дописать..
Відредаговано: DenDevin (21.03.2018 10:22, 7 років тому) |
| vpktz |
|
|---|---|
|
Дабы не плодить темы. ( к стати кому надо, со стилями я решил просто, uikit3 и {SEARCH_CAT|cot_rc_modify($this, 'class="uk-select" ')} ) У меня проблема с с этим {SEARCH_CAT} такая, когда стоят все категории по дефолту, то есть первая позиция в положении (все категории all) то у меня такая картина, Как вместо этих 3х прочерков поставить надпись ВСЕ КАТЕГОРИИ. Я конечно нашел файлы где есть php строки типо этих "SEARCH_CAT" => cot_projects_selectcat($c, 'c'), , но не умею я этот ваш php, пока не осилил хотя и хочу очень. |
| Kopusha |
|
|---|---|
|
Завтра дам примеры. Added 9 hours later: Я использую в моятема.resources такое $R['code_option_empty'] = ' - - - '; Для пустого можно вписать все что угодно, но это глобально во всей теме. Отдельно для какого то плуга если надо что то - смотрите как формируется в php файлах селект где есть другой текст для пустого выбора, там все очевидно. Відредаговано: Kopusha (11.04.2020 07:42, 5 років тому) |
| vpktz |
|
|---|---|
#44559 Kopusha: ВАУУУУУ, Вот это красота!!! То есть я так понимаю $R это какие то переменные? Узнать бы где находиться весь этот список. Копуш
Відредаговано: vpktz (11.04.2020 12:46, 5 років тому) |