Use custom dropdown icon on <select>

This commit is contained in:
djmaze 2021-02-19 14:40:13 +01:00
parent 158991ed55
commit bc64fe6d0d
3 changed files with 9 additions and 16 deletions

View file

@ -366,7 +366,7 @@ class SquireUI
this.plain = plain;
this.wysiwyg = wysiwyg;
toolbar.className = 'squire-toolbar';
toolbar.className = 'squire-toolbar btn-toolbar';
let touchTap;
for (let group in actions) {
if ('bidi' == group && !rl.settings.app('allowHtmlEditorBitiButtons')) {
@ -386,6 +386,7 @@ class SquireUI
ev = 'change';
} else if (cfg.select) {
input = doc.createElement('select');
input.className = 'btn';
if (Array.isArray(cfg.select)) {
cfg.select.forEach(value => {
var option = new Option(value, value);

View file

@ -1,7 +1,6 @@
.squire-toolbar {
padding: 2px;
box-shadow: none;
border-bottom: 1px solid #b6b6b6;
background: #EEE;
overflow-x: auto;
@ -9,14 +8,10 @@
white-space: nowrap;
}
.squire-toolbar .btn-group {
display: inline-block;
}
.squire-toolbar select {
font-size: 12px;
margin: 0;
padding: 0;
padding-left: 0;
text-align: left;
vertical-align: middle;
width: 7em;
}

View file

@ -118,15 +118,12 @@ input[type="checkbox"] {
// Make select elements obey height by applying a border
select {
width: 223px; // default input width + 10px of padding that doesn't get applied
appearance: none;
background: @inputBackground url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
border: 1px solid @inputBorder;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
cursor: pointer;
padding-right: 1.5em;
width: 223px; // default input width + 10px of padding that doesn't get applied
}
// Focus for select, file, radio, and checkbox