[TASK] Apply Bootstrap styling on <select> elements 67/44367/8
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Thu, 29 Oct 2015 17:57:02 +0000 (18:57 +0100)
committerFrank Nägler <frank.naegler@typo3.org>
Sun, 8 Nov 2015 19:10:37 +0000 (20:10 +0100)
Change the styling of <select> tags to get a more Bootstrap-like look&feel.
This currently works with Safari, Chrome and Firefox. Internet Explorer keeps
its native UI.

Resolves: #71395
Releases: master
Change-Id: Ifae57363d0f3ce048e581e66b27dfb862ef65ee7
Reviewed-on: https://review.typo3.org/44367
Reviewed-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Tested-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Reviewed-by: Frank Nägler <frank.naegler@typo3.org>
Tested-by: Frank Nägler <frank.naegler@typo3.org>
Build/Resources/Public/Less/TYPO3/_main_form.less
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index c48a8a6..1b09d1e 100644 (file)
@@ -138,6 +138,20 @@ select {
                        height: @input-height-base;
                        min-height: 0;
                }
+               &[size="1"],
+               &:not([size]) {
+                       appearance: none;
+                       background-image: url('@{path-sysext}/core/Resources/Public/Icons/T3Icons/actions/actions-view-list-expand.svg');
+                       background-position: right 4px center;
+                       background-repeat: no-repeat;
+                       background-size: 16px;
+                       padding-right: 24px;
+
+                       &.input-sm,
+                       .form-group-sm & {
+                               line-height: 16px;
+                       }
+               }
                > optgroup {
                        margin-top: 9px;
                        &:first-child {
index 1212a92..af1df05 100644 (file)
@@ -12234,6 +12234,23 @@ select.form-control[size="1"] {
   height: 32px;
   min-height: 0;
 }
+select.form-control[size="1"],
+select.form-control:not([size]) {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-image: url('../../../../../../typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-list-expand.svg');
+  background-position: right 4px center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: 24px;
+}
+select.form-control[size="1"].input-sm,
+select.form-control:not([size]).input-sm,
+.form-group-sm select.form-control[size="1"],
+.form-group-sm select.form-control:not([size]) {
+  line-height: 16px;
+}
 select.form-control > optgroup {
   margin-top: 9px;
 }