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