Permalink
Browse files

text input: modified css to add clear button to input type text. Feat…

…ure request #1834 - clear input button for text inputs
  • Loading branch information...
1 parent 1d077a0 commit 8c8c3f9df522067377da24e86a10f3461c87ba24 Collin F committed Nov 13, 2012
Showing with 16 additions and 11 deletions.
  1. +16 −11 css/structure/jquery.mobile.forms.textinput.css
@@ -5,15 +5,19 @@ input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini { margin: .25em 0; }
input.ui-input-text, textarea.ui-input-text, .ui-input-search { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
input.ui-input-text { -webkit-appearance: none; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
-.ui-input-search { padding: 0 30px; margin: .5em 0; background-image: none; position: relative; }
+.ui-input-search, .ui-input-text { padding: 0 30px; margin: .5em 0; background-image: none; position: relative; }
.ui-input-search.ui-mini { margin: .25em 0; }
-.ui-field-contain .ui-input-search { margin: 0; }
+.ui-field-contain .ui-input-search, .ui-field-contain .ui-input-text { margin: 0; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
-.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
-.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
+.ui-input-search input.ui-input-text, .ui-input-text input.ui-input-text, .ui-input-text textarea.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
+.ui-input-search .ui-input-clear, .ui-input-text .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
.ui-mini .ui-input-clear { right: -3px; }
-.ui-input-search .ui-input-clear-hidden { display: none; }
+.ui-input-text { padding: 0; }
+.ui-input-text input.ui-input-text, .ui-input-text textarea.ui-input-text { width: 100%; padding: .4em; }
+
+
+.ui-input-search .ui-input-clear-hidden, .ui-input-text .ui-input-clear-hidden { display: none; }
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
textarea.ui-mini { height: 45px; }
@@ -25,11 +29,12 @@ input[type=number]::-webkit-outer-spin-button { margin: 0; }
@media all and (min-width: 450px){
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
- .ui-field-contain input.ui-input-text,
- .ui-field-contain textarea.ui-input-text,
- .ui-field-contain .ui-input-search { width: 78%; display: inline-block; }
- .ui-hide-label input.ui-input-text,
- .ui-hide-label textarea.ui-input-text,
- .ui-hide-label .ui-input-search { width: 100%; }
+ .ui-field-contain input.ui-input-text,
+ .ui-field-contain textarea.ui-input-text,
+ .ui-field-contain .ui-input-search { width: 78%; display: inline-block; }
+ .ui-field-contain div.ui-input-text { width: 77%; display: inline-block; }
+ .ui-hide-label input.ui-input-text,
+ .ui-hide-label textarea.ui-input-text,
+ .ui-hide-label .ui-input-search, .ui-hide-label .ui-input-text { width: 100%; }
.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
}

0 comments on commit 8c8c3f9

Please sign in to comment.