Created
September 19, 2013 14:23
-
-
Save geirarne/6624257 to your computer and use it in GitHub Desktop.
New adventures in iOS input field styling, specifically disabled fields and placeholder text. Thanks to @fatso83 and http://blog.iamvdo.me/post/42510603205/styler-les-input-inactifs-disabled-sur-ios-iphone
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Placeholder & Disabled</title> | |
| <meta content="width=device-width, initial-scale=1" name="viewport"> | |
| <style> | |
| label { | |
| display: block; | |
| } | |
| input { | |
| margin-bottom: 2em; | |
| } | |
| input[disabled] { | |
| color: green; | |
| opacity: 1; | |
| -webkit-text-fill-color: green; | |
| } | |
| input::-webkit-input-placeholder { | |
| color: red; | |
| } | |
| input[disabled]::-webkit-input-placeholder { | |
| color: blue; | |
| -webkit-text-fill-color: blue; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form> | |
| <label for="regular">Regular</label> | |
| <input type="text" value="Hello World!" id="regular"> | |
| <label for="disabled">Disabled</label> | |
| <input type="text" value="Hello World!" disabled id="disabled"> | |
| <label for="placeholder">Placeholder</label> | |
| <input type="text" placeholder="Hello World!" id="placeholder"> | |
| <label for="disabled-placeholder">Disabled w/placeholder</label> | |
| <input type="text" disabled placeholder="Dummy text" id="disabled-placeholder"> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment