CSS格式化、兼容及常用样式(switch开关记得收藏)

内容介绍
一、格式化
- 1、select格式化样式
- 2、button格式化样式
- 3、input去除边框
- 4、selection去除下拉三角按钮
- 5、textarea隐藏右下角拖动及滚动条
二、兼容
- 1、textarea滚动条——针对firefox浏览器
- 2、flex布局
三、常用样式
- 1、不重复百分百背景图居中
- 2、文本两端对齐
- 3、文本不被选中（可禁止移动端长按选中复制）
- 4、防止滚动条导致页面晃动
- 5、按钮轮廓
- 6、table表格多行居中
- 7、文本换行
- 8、复选框不同状态背景图
四、switch开关
- 1、mui-switch.css
- - 1.1 效果图
  - 1.2 HTML代码
  - 1.3 CSS代码
- 2、switch.css
- - 2.1 效果图
  - 2.2 HTML代码
  - 2.3 CSS代码

内容介绍

不经历项目的苦，哪能体会一像素一边框一阴影带来的痛（为了减少痛苦，建议收藏备用）。

一、格式化

1、select格式化样式

/* select格式化样式： */
.select {border: 1px solid #C6CBD4;outline: none;text-shadow: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;-webkit-user-select: text;box-shadow: none;
}

2、button格式化样式

/* button格式化样式：  */
#searchBtn {width: 134px;height: 40px;font-weight: bold;background-color: #0FB273;cursor: pointer;color: #fff;outline: none;border: none;text-shadow: none;-webkit-appearance: none;-webkit-user-select: text;box-shadow: none;border-radius: 5px;font-size: 16px;cursor: pointer;
}

3、input去除边框

/* input去除边框： */
input {outline: none;border: 0;
}

4、selection去除下拉三角按钮

/* selection去除下拉三角按钮：  */
select {appearance: none;-moz-appearance: none;-webkit-appearance: none;
}select::-ms-expand {display: none;
}

5、textarea隐藏右下角拖动及滚动条

/* textarea隐藏右下角拖动及滚动条： */
#refuseTextarea {width: 680px;height: 160px;resize: none;text-indent: 10px;line-height: 20px;border-radius: 4px;padding: 5px 0;border: none;outline: none;
}#refuseTextarea::placeholder {color: rgba(0, 0, 0, 0.25);
}#refuseTextarea::-webkit-scrollbar {width: 0;display: none;
}

二、兼容

1、textarea滚动条——针对firefox浏览器

/* textarea滚动条——针对firefox浏览器 */
textarea {scrollbar-color: transparent transparent;scrollbar-track-color: transparent;-ms-scrollbar-track-color: transparent;
}

2、flex布局

/* flex布局 */
.flexBox {display: flex;display: -moz-flex;display: -o-flex;display: -webkit-flex;display: -ms-flex;
}

三、常用样式

1、不重复百分百背景图居中

/* 不重复百分百背景图居中 */
.bgCover {background-position: center;background-repeat: no-repeat;background-size: 100% 100%;
}

2、文本两端对齐

/* 文本两端对齐： */
.text {text-align-last: justify;text-align: justify;text-justify: distribute-all-lines;/* 兼容ie */
}

3、文本不被选中（可禁止移动端长按选中复制）

/* 文本不被选中（可禁止移动端长按选中复制）：  */
body {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}

4、防止滚动条导致页面晃动

/* 防止滚动条导致页面晃动： */
html {overflow-y: scroll;
}:root {overflow-x: auto;overflow-y: hidden;
}:root body {position: absolute;
}body {width: 100vw;overflow: hidden;
}

5、按钮轮廓

/* 按钮轮廓： */
.button {box-shadow: inset -1px 0px 1px 1px #333;
}

6、table表格多行居中

/* table表格多行居中： */
.missionTable .limitCell {line-height: 20px;display: table-cell;vertical-align: middle;
}

7、文本换行

.textWrap {/* 自动换行（包括网址）： */word-wrap: break-word;word-break: break-all;white-space: normal;/* 单行文本溢出省略号： */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

8、复选框不同状态背景图

/* 复选框不同状态背景图： */
.checkList>input {width: 16px;height: 16px;border-radius: 2px;position: relative;
}.checkList>input::after {content: "";width: 16px;height: 16px;position: absolute;background-repeat: no-repeat;background-size: 16px 16px;background-position: center;
}.checkList>input:checked::after {background-image: url('../images/selected.png');
}.checkList>input:disabled::after {background-image: url('../images/choose.png');
}

四、switch开关

1、mui-switch.css

1.1 效果图

1.2 HTML代码

<label><input class="mui-switch mui-switch-animbg" type="checkbox">文字</label>

1.3 CSS代码

.mui-switch {width: 52px;height: 31px;position: relative;border: 1px solid #dfdfdf;background-color: #fdfdfd;box-shadow: #dfdfdf 0 0 0 0 inset;border-radius: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;background-clip: content-box;display: inline-block;-webkit-appearance: none;user-select: none;outline: none;
}.mui-switch:before {content: '';width: 29px;height: 29px;position: absolute;top: 0px;left: 0;border-radius: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;background-color: #fff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}.mui-switch:checked {border-color: #64bd63;box-shadow: #64bd63 0 0 0 16px inset;background-color: #64bd63;
}.mui-switch:checked:before {left: 21px;
}.mui-switch.mui-switch-animbg {transition: background-color ease 0.4s;
}.mui-switch.mui-switch-animbg:before {transition: left 0.3s;
}.mui-switch.mui-switch-animbg:checked {box-shadow: #dfdfdf 0 0 0 0 inset;background-color: #64bd63;transition: border-color 0.4s, background-color ease 0.4s;
}.mui-switch.mui-switch-animbg:checked:before {transition: left 0.3s;
}.mui-switch.mui-switch-anim {transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}.mui-switch.mui-switch-anim:before {transition: left 0.3s;
}.mui-switch.mui-switch-anim:checked {box-shadow: #64bd63 0 0 0 16px inset;background-color: #64bd63;transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}.mui-switch.mui-switch-anim:checked:before {transition: left 0.3s;
}

2、switch.css

2.1 效果图

2.2 HTML代码

<input class="switch switch-anim containerPagingStatusChild" status="0" type="checkbox" />

2.3 CSS代码

.switch {width: 57px;height: 28px;position: relative;border: 1px solid #dfdfdf;background-color: #fdfdfd;box-shadow: #dfdfdf 0 0 0 0 inset;border-radius: 20px;background-clip: content-box;display: inline-block;-webkit-appearance: none;user-select: none;outline: none;cursor: pointer;
}.switch:before {content: '';width: 26px;height: 26px;position: absolute;top: 0;left: 0;border-radius: 20px;background-color: #fff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}.switch:checked {border-color: #4B74FF;box-shadow: #4B74FF 0 0 0 16px inset;background-color: #4B74FF;
}.switch:checked:before {left: 30px;
}.switch.switch-anim {transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}.switch.switch-anim:before {transition: left 0.3s;
}.switch.switch-anim:checked {box-shadow: #4B74FF 0 0 0 16px inset;background-color: #4B74FF;transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}.switch.switch-anim:checked:before {transition: left 0.3s;
}

标签：CSS，格式化样式，兼容样式，常用样式，switch开关

更多演示案例，查看 案例演示

欢迎评论留言!

CSS格式化、兼容及常用样式(switch开关记得收藏)相关推荐

CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）
<html><head><title>CSS的选择器和常用样式</title><meta charset="UTF-8"/&g ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
CSS文本颜色等常用样式
常用字体属性 font-family :指定字体类型 font- size:指定文本的字体大小 font-style:指定文本的字体样式 font-weight:指定文本的字体粗细 ...
前端学习之CSS（03）常用样式
文字.背景.超链接.列表和表格文字样式一.基本单位 px 像素 em 字符(自动适应用户所使用的字体) % 百分比(不同情况下相对值不同) 二.颜色 red,blue,green:三基色 rgb( ...
推荐几款渗透测试常用的脚本（记得收藏）
1.dirsearch目录扫描 2.OneForAll-master资产收集 3.sqlmap 4.awvs批量扫描 5.ip解码注意:在使用之前将自己的电脑先安装好python2x和python3 ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
CSS做个Switch开关
Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id="switch&quo ...
css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...

CSS格式化、兼容及常用样式(switch开关记得收藏)

目录

内容介绍

一、格式化

1、select格式化样式

2、button格式化样式

3、input去除边框

4、selection去除下拉三角按钮

5、textarea隐藏右下角拖动及滚动条

二、兼容

1、textarea滚动条——针对firefox浏览器

2、flex布局

三、常用样式

1、不重复百分百背景图居中

2、文本两端对齐

3、文本不被选中（可禁止移动端长按选中复制）

4、防止滚动条导致页面晃动

5、按钮轮廓

6、table表格多行居中

7、文本换行

8、复选框不同状态背景图

四、switch开关

1、mui-switch.css

1.1 效果图

1.2 HTML代码

1.3 CSS代码

2、switch.css

2.1 效果图

2.2 HTML代码

2.3 CSS代码

CSS格式化、兼容及常用样式(switch开关记得收藏)相关推荐

最新文章

热门文章