Guest User

Untitled

a guest
Apr 22nd, 2018
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.09 KB | None | 0 0
  1. `input`、`select` 与 `textarea` 元素虽然都是表单元素中的 `内行块级元素`(默认 `display:inline-block;`),但是它们的区别还是挺大的。不仅仅表现在 `padding`、`border-width`等常见属性上,更表现在`box-sizing` 属性上。
  2.  
  3. - 默认 `box-sizing` 属性区别:
  4. - `input` 元素的默认 `box-sizing` 属性表现为 `content-box`,即 W3C 标准盒模型;
  5. - `select` 与 `textarea` 元素的默认 `box-sizing` 属性表现为 `border-box`,即 IE(怪异)盒模型;
  6. > 注:在 Chrome 的`开发者工具`里面各元素的默认 `box-sizing` 属性只在其值为 `box-sizing` 时才显示出来;没显示出来的,其值都默认为 `content-box`。
  7.  
  8. ```css
  9. select {
  10. appearance:none;
  11. -moz-appearance:none; /*for firefox*/
  12. -webkit-appearance:none; /*for chrome*/
  13.  /*background: url("/***/img.png") no-repeat scroll right center color; */   /*以图片背景代替原小三角形*/
  14. }
  15. input, select, textarea {
  16. border: solid 1px initial;
  17. padding-left: 6px;
  18. box-sizing: border-box;
  19. font-size: 12px;
  20. }
  21. ```
  22.  
  23.  
  24.  
  25. > 待更新
Add Comment
Please, Sign In to add comment