diff --git a/scss/_form.scss b/scss/_form.scss index c0fccda17f..7b288a1614 100644 --- a/scss/_form.scss +++ b/scss/_form.scss @@ -160,7 +160,6 @@ textarea { // ------------------------------- // Shared size and type resets -select, textarea, input[type="text"], input[type="password"], @@ -232,24 +231,11 @@ input[type="checkbox"] { width: auto; // Override of generic input selector } -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Set the height of select and file controls to match text inputs -select, +// Set the height of file to match text inputs input[type="file"] { line-height: $input-height-base; } -// Make select elements obey height by applying a border -select { - border: $input-border-width solid $input-border; - background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color -} - // Placeholder // ------------------------------- diff --git a/scss/_select.scss b/scss/_select.scss new file mode 100644 index 0000000000..699f49ff76 --- /dev/null +++ b/scss/_select.scss @@ -0,0 +1,94 @@ + +/** + * Select + * -------------------------------------------------- + */ + + +// shared styles for transparent select elements +.select-inline select, +.item-select select { + @include appearance(none); + border: none; + background: transparent; + color: #333; + + // hack to hide default dropdown arrow in FF + text-indent: 1px; + text-overflow: ''; + + white-space: nowrap; + font-size: $font-size-base; +} + +.select-inline { + position: relative; + display: inline-block; + overflow: hidden; + border: $input-border-width solid $input-border; + border-radius: 2px; + background-color: $input-bg; + color: $input-color; + + vertical-align: middle; + font-size: $font-size-base; + line-height: $font-size-base + 2; + + select { + padding: 6px 25px 7px 8px; + } +} + +.select-inline + .select-inline { + margin-left: 6px; +} + +.item-select { + position: static; // required for Android 2.3 + + select { + position: absolute; + top: 0; + right: 0; + padding: ($item-padding - 2) ($item-padding * 3) ($item-padding) 5px; + width: 100%; + direction: rtl; // right align the select text + + &:focus { + min-width: 20%; + width: auto; // shrink width when opened + } + } +} + + +// shared styles for dropdown arrow +.select-inline:after, +.item-select:after { + position: absolute; + top: 50%; + margin-top: -3px; + width: 0; + height: 0; + border-top: 5px solid; + border-right: 5px solid rgba(0, 0, 0, 0); + border-left: 5px solid rgba(0, 0, 0, 0); + color: #999; + content: ""; + pointer-events: none; +} + +.select-inline:after { + right: 7px; +} + +.item-select:after { + right: $item-padding; +} + +select { + &[multiple], + &[size] { + height: auto; + } +} diff --git a/scss/ionic.scss b/scss/ionic.scss index 2a463efac8..a64b409d20 100644 --- a/scss/ionic.scss +++ b/scss/ionic.scss @@ -33,6 +33,7 @@ "toggle", "radio", "range", + "select", "progress", // Buttons diff --git a/test/html/input-select.html b/test/html/input-select.html index f3b210289e..f211388151 100644 --- a/test/html/input-select.html +++ b/test/html/input-select.html @@ -7,46 +7,124 @@ -
+
+

Input: Select

+
-
-

Input: Select

-
+
-
- -

- + + + + +

+ +

+ + -

- -

- + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + -

+ +

-
-

All CSS Tests

+
+ +
+
+ Select Month +
+
-
+ -
+
+

All CSS Tests

+
+ +