Advertisement
Guest User

Untitled

a guest
May 27th, 2015
268
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.47 KB | None | 0 0
  1. /* ----------------------------------------------------------------------------------------------------
  2.  
  3. Super Form Reset
  4.  
  5. A couple of things to watch out for:
  6.  
  7. - IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
  8. - The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
  9. - You NEED to set the font-size and family on all form elements
  10. - Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
  11. - You can style the upload button in webkit using ::-webkit-file-upload-button
  12. - ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
  13. - IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
  14. - By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs
  15.  
  16. ----------------------------------------------------------------------------------------------------*/
  17.  
  18. input,
  19. label,
  20. select,
  21. button,
  22. textarea
  23. {
  24. margin:0;
  25. border:0;
  26. padding:0;
  27. display:inline-block;
  28. vertical-align:middle;
  29. white-space:normal;
  30. background:none;
  31. line-height:1;
  32.  
  33. /* Browsers have different default form fonts */
  34. font-size:13px;
  35. font-family:Arial;
  36. }
  37.  
  38. /* Remove the stupid outer glow in Webkit */
  39. input:focus
  40. {
  41. outline:0;
  42. }
  43.  
  44. /* Box Sizing Reset
  45. -----------------------------------------------*/
  46.  
  47. /* All of our custom controls should be what we expect them to be */
  48. input,
  49. textarea
  50. {
  51. -webkit-box-sizing:content-box;
  52. -moz-box-sizing:content-box;
  53. box-sizing:content-box;
  54. }
  55.  
  56. /* These elements are usually rendered a certain way by the browser */
  57. button,
  58. input[type=reset],
  59. input[type=button],
  60. input[type=submit],
  61. input[type=checkbox],
  62. input[type=radio],
  63. select
  64. {
  65. -webkit-box-sizing:border-box;
  66. -moz-box-sizing:border-box;
  67. box-sizing:border-box;
  68. }
  69.  
  70. /* Text Inputs
  71. -----------------------------------------------*/
  72.  
  73. input[type=date],
  74. input[type=datetime],
  75. input[type=datetime-local],
  76. input[type=email],
  77. input[type=month],
  78. input[type=number],
  79. input[type=password],
  80. input[type=range],
  81. input[type=search],
  82. input[type=tel],
  83. input[type=text],
  84. input[type=time],
  85. input[type=url],
  86. input[type=week]
  87. {
  88. }
  89.  
  90. /* Button Controls
  91. -----------------------------------------------*/
  92.  
  93. input[type=checkbox],
  94. input[type=radio]
  95. {
  96. width:13px;
  97. height:13px;
  98. }
  99.  
  100. /* File Uploads
  101. -----------------------------------------------*/
  102.  
  103. input[type=file]
  104. {
  105.  
  106. }
  107.  
  108. /* Search Input
  109. -----------------------------------------------*/
  110.  
  111. /* Make webkit render the search input like a normal text field */
  112. input[type=search]
  113. {
  114. -webkit-appearance:textfield;
  115. -webkit-box-sizing:content-box;
  116. }
  117.  
  118. /* Turn off the recent search for webkit. It adds about 15px padding on the left */
  119. ::-webkit-search-decoration
  120. {
  121. display:none;
  122. }
  123.  
  124. /* Buttons
  125. -----------------------------------------------*/
  126.  
  127. button,
  128. input[type="reset"],
  129. input[type="button"],
  130. input[type="submit"]
  131. {
  132. /* Fix IE7 display bug */
  133. overflow:visible;
  134. width:auto;
  135. }
  136.  
  137. /* IE8 and FF freak out if this rule is within another selector */
  138. ::-webkit-file-upload-button
  139. {
  140. padding:0;
  141. border:0;
  142. background:none;
  143. }
  144.  
  145. /* Textarea
  146. -----------------------------------------------*/
  147.  
  148. textarea
  149. {
  150. /* Move the label to the top */
  151. vertical-align:top;
  152.  
  153. /* Turn off scroll bars in IE unless needed */
  154. overflow:auto;
  155. }
  156.  
  157. /* Selects
  158. -----------------------------------------------*/
  159.  
  160. select
  161. {
  162.  
  163. }
  164.  
  165. select[multiple]
  166. {
  167. /* Move the label to the top */
  168. vertical-align:top;
  169. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement