diff --git a/core/misc/icons/333333/caret-down.svg b/core/misc/icons/333333/caret-down.svg new file mode 100644 index 00000000000..4e48c8c9830 --- /dev/null +++ b/core/misc/icons/333333/caret-down.svg @@ -0,0 +1 @@ + diff --git a/core/themes/seven/css/style.css b/core/themes/seven/css/style.css index c911eee58a1..ff81295a29d 100644 --- a/core/themes/seven/css/style.css +++ b/core/themes/seven/css/style.css @@ -831,8 +831,7 @@ input.form-color, input.form-file, input.form-date, input.form-time, -textarea.form-textarea, -select.form-select { +textarea.form-textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -861,8 +860,7 @@ select.form-select { .form-file:focus, .form-textarea:focus, .form-date:focus, -.form-time:focus, -.form-select:focus { +.form-time:focus { border-color: #40b6ff; outline: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px #40b6ff; @@ -888,6 +886,39 @@ select.form-select { } +/** + * Select elements - Webkit only + */ +@media screen and (-webkit-min-device-pixel-ratio: 0) { + select { + cursor: pointer; + -webkit-appearance: none; + padding: 1px 1.571em 1px 0.5em; /* LTR */ + border: 1px solid #a6a6a6; + border-radius: 0.143em; + background: + url("../../../misc/icons/333333/caret-down.svg") no-repeat 99% 63%, + -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */ + text-shadow: 0 1px hsla(0, 0%, 100%, 0.6); + font-size: 0.875rem; + transition: all 0.1s; + -webkit-font-smoothing: antialiased; + } + [dir="rtl"] select { + padding: 1px 0.714em 1px 1.571em; + background-position: 1% 63%, 0 0; + } + select:focus, + select:hover { + background-image: url("../../../misc/icons/333333/caret-down.svg"), + -webkit-linear-gradient(top, #fcfcfa, #e9e9dd); + color: #1a1a1a; + } + select:hover { + box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125); + } +} + /** * Improve spacing of cancel link. */