文本框 <input>
默认样式
长度为200px，高度为34px
  1. <input class="xinput" />
圆角样式
border-radius为5px
  1. <input class="xinput xround" />
宽度
xwidth1长度为250px，每次增加50px










  1. <input class="xinput xwidth1" />
  2. <input class="xinput xwidth2" />
  3. <input class="xinput xwidth3" />
  4. <input class="xinput xwidth4" />
  5. <input class="xinput xwidth5" />
  6. <input class="xinput xwidth6" />
高度
xheight1高度为38px，每次增加4px






  1. <input class="xinput xheight1" />
  2. <input class="xinput xheight2" />
  3. <input class="xinput xheight3" />
  4. <input class="xinput xheight4" />
100%宽度
宽度为100%
  1. <input class="xinput xful" />
下划线
  1. <input class="xinput xunder" />
只读文本框
  1. <input class="xinput xreadonly" readonly="readonly" />
组合样式
可多个样式随意组合
  1. <input class="xinput xful xround" />
文本域 <textarea>
默认样式
长度为200px，高度为80px
  1. <textarea class="xtext"></textarea>
圆角样式
border-radius为5px
  1. <textarea class="xtext xround"></textarea>
宽度
xwidth1长度为250px，每次增加50px










  1. <textarea class="xtext xwidth1" ><textarea>
  2. <textarea class="xtext xwidth2" ><textarea>
  3. <textarea class="xtext xwidth3" ><textarea>
  4. <textarea class="xtext xwidth4" ><textarea>
  5. <textarea class="xtext xwidth5" ><textarea>
  6. <textarea class="xtext xwidth6" ><textarea>
高度
xheight1高度为38px，每次增加20px










  1. <textarea class="xtext xheight1" ><textarea>
  2. <textarea class="xtext xheight2" ><textarea>
  3. <textarea class="xtext xheight3" ><textarea>
  4. <textarea class="xtext xheight4" ><textarea>
  5. <textarea class="xtext xheight5" ><textarea>
  6. <textarea class="xtext xheight6" ><textarea>
100%宽度
长度为100%
  1. <textarea class="xtext xful"></textarea>
下划线
  1. <textarea class="xtext xunder" ></textarea>
组合样式
可多个样式随意组合
  1. <textarea class="xtext xful xround"></textarea>
下拉框 <select>
默认样式
长度为200px，高度为34px
  1. <select class="xselect">
  2. <option>选项1</option>
  3. <option>选项2</option>
  4. <option>选项3</option>
  5. </select>
圆角样式
border-radius为5px
  1. <select class="xselect xround">
  2. <option>选项1</option>
  3. <option>选项2</option>
  4. <option>选项3</option>
  5. </select>
黑色样式
border-radius为5px
  1. <select class="xselect xblack">
  2. <option>选项1</option>
  3. <option>选项2</option>
  4. <option>选项3</option>
  5. </select>
宽度
xwidth1长度为250px，每次增加50px










  1. <select class="xselect xwidth1">
  2. <option>选项1</option>
  3. <option>选项2</option>
  4. <option>选项3</option>
  5. </select>
高度
xheight1高度为38px，每次增加4px






  1. <select class="xselect xheight1">
  2. <option>选项1</option>
  3. <option>选项2</option>
  4. <option>选项3</option>
100%宽度
长度为100%
  1. <select class="xselect xful">
  2. <option>选项1</option>
  3. <option>选项2</option>
  4. <option>选项3</option>
  5. </select>
组合样式
可多个样式随意组合
  1. <select class="xselect xful xround">
  2. <option>选项1</option>
  3. <option>选项2</option>
  4. <option>选项3</option>
  5. </select>
按钮 <button>
class="" 样式 代码
xbutton <button class="xbutton">按钮</button>
xbutton xblue <button class="xbutton xblue">按钮</button>
xbutton xred <button class="xbutton xred">按钮</button>
xbutton xyellow <button class="xbutton xyellow">按钮</button>
xbutton xgreen <button class="xbutton xgreen">按钮</button>
xbutton xblack <button class="xbutton xblack">按钮</button>
xbutton xround <button class="xbutton xround">按钮</button>
xbutton xdisabled <button class="xbutton xdisabled">按钮</button>
xbutton:disabled <button class="xbutton" disabled="disabled">按钮</button>
xbutton xlit <button class="xbutton xlit" >按钮</button>
xbutton xful <button class="xbutton xful">按钮</button>
xbutton xblue xround <button class="xbutton xblue xround">按钮</button>
单选框 <input type="radio">
颜色表 描述 class
蓝色 xblue xblue2
红色 xred xred2
黄色 xyellow xyellow2
绿色 xgreen xgreen2
黑色 xblack xblack2
颜色后面加 2 时，表示选中后文字一起变色，具体见下方例示代码
默认样式
  1. <span class="xradio">
  2. <label>
  3. <input type="radio" name="radio1" /><em></em>
  4. <span>默认样式</span>
  5. </label>
  6. </span>
选中后文字也一起变色
  1. <span class="xradio xblue2">
  2. <label>
  3. <input type="radio" name="radio1" /><em></em>
  4. <span>选中后文字也一起变色</span>
  5. </label>
  6. </span>
纵向单选框
  1. <div class="xradio">
  2. <label>
  3. <input type="radio" name="radio1" /><em></em>
  4. <span>菠萝</span>
  5. </label>
  6. </div>
横向单选框
  1. <span class="xradio">
  2. <label>
  3. <input type="radio" name="radio1" /><em></em>
  4. <span>菠萝</span>
  5. </label>
  6. </span>
复选框 <input type="checkbox">
颜色表 描述 class
蓝色 xblue xblue2
红色 xred xred2
黄色 xyellow xyellow2
绿色 xgreen xgreen2
黑色 xblack xblack2
颜色后面加 2 时，表示选中后文字一起变色，具体见下方例示代码
无文字描述
  1. <span class="xcheckbox">
  2. <label>
  3. <input type="checkbox" name="checkbox1[]" /><em></em>
  4. </label>
  5. </span>
有文字描述
  1. <span class="xcheckbox">
  2. <label>
  3. <input type="checkbox" name="checkbox1[]" /><em></em>
  4. <span>有文字描述</span>
  5. </label>
  6. </span>
选中后文字也一起变色
  1. <span class="xcheckbox xblue2">
  2. <label>
  3. <input type="checkbox" name="checkbox1[]" /><em></em>
  4. <span>选中后文字也一起变色</span>
  5. </label>
  6. </span>
纵向显示
  1. <div class="xcheckbox">
  2. <label>
  3. <input type="checkbox" name="checkbox1[]" /><em></em>
  4. <span>菠萝</span>
  5. </label>
  6. </div>
横向显示
  1. <span class="xcheckbox">
  2. <label>
  3. <input type="checkbox" name="checkbox1[]" /><em></em>
  4. <span>菠萝</span>
  5. </label>
  6. </span>
开关 <input type="checkbox">
本质上是单个的复选框
默认样式
  1. <input class="xswitch" type="checkbox" name="checkbox1" />
带ON/OFF文字
  1. <input class="xswitch xonoff" type="checkbox" name="checkbox1" />
自定义文字描述
class="xswitch-tip"，为 <input> 自定义文字描述
  1. <div class="xswitch-tip">
  2. <label>
  3. <input type="checkbox" name="checkbox1" /><em></em>
  4. <span>是否发射核弹</span>
  5. <span>发射！！</span>
  6. </label>
  7. </div>
其他颜色
class="xswitch"，为 <input> 额外添加一个颜色CSS即可
class="xswitch-tip"，为 <input> 父标签额外添加一个颜色CSS即可
  1. <input class="xswitch xblue" type="checkbox" />
  3. /****或****/
  5. <div class="xswitch-tip xblue">
  6. <label>
  7. <input type="checkbox" name="checkbox1" /><em></em>
  8. <span>是否发射核弹</span>
  9. <span>发射！！</span>
  10. </label>
  11. </div>
上传控件 <input type="file">
class="xfile"，为 <input> 父标签内的上传控件增加默认样式
默认样式
默认样式
  1. <div class="xfile">
  2. <input type="file" />
  3. <span><i></i>默认样式</span>
  4. </div>
class="xfile xlit"，为 <input> 父标签内的上传控件增加小尺寸样式
小尺寸
小尺寸 小尺寸
  1. <span class="xfile xlit">
  2. <input type="file" />
  3. <span><i></i>默认样式</span>
  4. </span>
其他颜色
蓝色样式 红色样式 黄色样式 绿色样式 黑色样式
  1. <span class="xfile xblue">
  2. <input type="file" />
  3. <span><i></i>默认样式</span>
  4. </span>
无图标样式
无图标样式
  1. <div class="xfile">
  2. <input type="file" />
  3. <span>无图片样式</span>
  4. </div>
自定义图片样式<img>
图片无尺寸要求
自定义图片样式
  1. <div class="xfile">
  2. <input type="file" />
  3. <span><img src="css/img.png" />自定义图片样式</span>
  4. </div>
自定义font样式<i class="icon-【自定义font class名】">
当<i>标签class包含icon- ico- ion- glyphicon- fa- ti- zmdi- wi-（常用图标库）时，默认图标会被替换成新的font图标
自定义font样式
  1. <div class="xfile">
  2. <input type="file" />
  3. <span><i class="icon-"></i>自定义font样式</span>
  4. </div>
选中文件反馈
由于css不支持检测是否有选中文件，所以选中反馈需要添加额外的 javascript 代码，这是本项目唯一有用到 javascript 的地方
当然这不是必要的，你可以选择不加，只是用户体验不好，用户不知道有没有选中文件
本例使用了原生的 javascript 代码，无需加载 jQuery
未选中文件 无图标样式 无图标样式 自定义font样式
  1. <div class="xfile">
  2. <input type="file" onchange="xfileok(this)" />
  3. <span><i></i>未选中文件</span>
  4. </div>
  6. <script>
  7. function xfileok(o)
  8. {
  9. //获取文件名
  10. let files = o.files;
  11. let fval;
  12. if(files.length>1){
  13. fval = files.length+"个文件";
  14. }else if(files.length==1){
  15. fval = files[0].name;
  16. }
  18. //修改文本
  19. let prefix = '已选择: ';
  20. let reg = /(\<i(\s{1,}class\=[\"\'][A-z0-9_\-]*[\"\'])?\>\<\/i\>|\<img\s{1,}src\=[\"\'][A-z0-9_\/\.\-]*[\"\']\s{0,}\/{0,}\>)?(\S*)/;
  21. let span = o.parentNode.getElementsByTagName("span")[0];
  22. spanhtml = span.innerHTML;
  23. match = spanhtml.match(reg);
  24. oldname = span.dataset.oldname;
  26. html = '';
  27. if(match[1]){
  28. html += match[1];
  29. }
  30. if(fval){
  31. html += prefix + fval;
  32. span.innerHTML = html;
  33. if(!oldname){
  34. span.dataset.oldname = match[3];
  35. }
  36. }else{
  37. html += oldname;
  38. span.innerHTML = html;
  39. }
  40. }
  41. </script>
表格 <table>
标签 class="" 描述
<table> <table class="xtable">…</table> 表格本身
<table>的父标签 <div class="xtablein"><table>…</table></div> 元素内的表格
默认样式：少量的内边距（padding:8px）和边框
class="xtable"，为 <table> 标签增加默认样式
class="xtablein"，为 <table> 父标签内的表格增加默认样式
A B C
1 a b c
d e f
2 g h
3 i j
  1. <table class="xtable">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein">
  8. <table>
  9. …
  10. </table>
  11. </div>
无外部边框样式
class="xtable xnobor-out"，为 <table> 标签增加无外部边框样式
class="xtablein xnobor-out"，为 <table> 父标签内的表格增加无外部边框样式
A B C
1 a b c
d e f
2 g h
3 i j
  1. <table class="xtable xnobor-out">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein xnobor-out">
  8. <table>
  9. …
  10. </table>
  11. </div>
无内部边框样式
class="xtable xnobor-in"，为 <table> 标签增加无内部边框样式
class="xtablein xnobor-in"，为 <table> 父标签内的表格增加无内部边框样式
123
456
  1. <table class="xtable xnobor-in">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein xnobor-in">
  8. <table>
  9. …
  10. </table>
  11. </div>
无全部边框样式
class="xtable xnobor-all"，为 <table> 标签增加无全部边框样式
class="xtablein xnobor-all"，为 <table> 父标签内的表格增加无全部边框样式
123
456
  1. <table class="xtable xnobor-all">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein xnobor-all">
  8. <table>
  9. …
  10. </table>
  11. </div>
水平边框样式
class="xtable xbor-tr"，为 <table> 标签增加水平边框样式
class="xtablein xbor-tr"，为 <table> 父标签内的表格增加水平边框样式
A B C
1 a b c
d e f
2 g h
3 i j
  1. <table class="xtable xbor-tr">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein xbor-tr">
  8. <table>
  9. …
  10. </table>
  11. </div>
水平边框无外边框样式
class="xtable xbor-tr-noout"，为 <table> 标签增加水平边框无外边框样式
class="xtablein xbor-tr-noout"，为 <table> 父标签内的表格增加水平边框无外边框样式
A B C
1 a b c
d e f
2 g h
3 i j
  1. <table class="xtable xbor-tr-noout">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein xbor-tr-noout">
  8. <table>
  9. …
  10. </table>
  11. </div>
圆角样式
class="xtable xround"，为 <table> 标签增加圆角样式
class="xtablein xround"，为 <table> 父标签内的表格增加圆角样式
1 First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="xtable xround">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein xround">
  8. <table>
  9. …
  10. </table>
  11. </div>
行间隔背景色 奇数(xodd) 或 偶数(xeven)
class="xtable xodd / xeven"，为 <table> 标签增加行间隔背景色
class="xtablein xodd / xeven"，为 <table> 父标签内的表格增加行间隔背景色
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
  1. <table class="xtable xodd">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein xodd">
  8. <table>
  9. …
  10. </table>
  11. </div>
  13. /****************或****************/
  15. <table class="xtable xeven">
  16. …
  17. </table>
  19. /****或****/
  21. <div class="xtablein xeven">
  22. <table>
  23. …
  24. </table>
  25. </div>
鼠标悬停样式
class="xtable xhover"，为 <table> 标签增加鼠标悬停样式
class="xtable xhover"，为 <table> 父标签内的表格增加鼠标悬停样式
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
  1. <table class="xtable xhover">
  2. …
  3. </table>
  5. /****或****/
  7. <div class="xtablein xhover">
  8. <table>
  9. …
  10. </table>
  11. </div>
本项目为纯css项目，参考了Bootstrap