纯css的select、table、滚动条等样式美化总结

原创 糖钉子 教程 css 691阅读 2017-06-14 18:03:27 举报

在工作中遇到了很多要优化的小东西,因为比较少所以调用插件很麻烦,就想用纯css,像选框、table等,今天做一个总结,方便下次参考

---------------------------------------------------------------------我是要正式开始了的分割线-----------------------------------------------------------------------

###select下拉框

select下拉框首先要隐藏它自身的样式,然后把想要添加的样式填进去

html 代码

效果是这样的,因为这里不能加载背景图片,所以下拉按钮看不见

纯css的select、table、滚动条等样式美化总结

纯css的select、table、滚动条等样式美化总结

---------------------------------------------------------------------我是下拉框和table的分割线-----------------------------------------------------------------------

table

注:发现一个小问题,不知道是不是前端网的bug,在IE上后面两个在前端网上打开都有问题,但是把代码单独拿出来写一下是没有问题的

table其实通常都是用插件来自动生成的,在这里推荐两个很方便也很好用的插件:easyui-datagrid和datatable,百度一下就有了,感兴趣的自己查一下哈。
但是有时候就是一个小table,不想用插件的话,也可以修改,table的样式主要记一个查了很久的点:
head 不动,只给body添加下拉框

这个地方我查了很久才找到,其实说起来也很简单,就是给head和body分别设置display,但是需要这样的话,每列就不能自动对齐了,所以要分别设置宽度,也可以设置为统一宽度。
话不多说,上代码

html 代码

简单的样式就是这样了

纯css的select、table、滚动条等样式美化总结

-------------------------------------------------------------------------------我是table和滚动条的分割线------------------------------------------------------------------------

滚动条

也可以修改一下样式,正好就在这里顺便记录一下,查了很久的滚动条样式美化吧

滚动条这里有点可惜的是我只找到了IE和谷歌的样式,火狐还是不可以,以后如果找到了还会再加的,
还有就是因为没有用到js,纯css还是有点lowlow哒,不是很好看,也是没办法,实在不行还是建议大家用插件吧

这里就直接用上面的table来做吧

html 代码

额,看起来是有点丑,配色都是随手点的,不要在意这些细节哈,主要的样式,还是出来了的

纯css的select、table、滚动条等样式美化总结

-----------------------------------------------------------------------------我是终于写完了的分割线------------------------------------------------------------------------------

写完啦,以后如果有的话会继续加进去的,这样下次自己写也好查看,顺便给大家参考一下,因为主要为了记笔记,所以都只是把重点的写了一下,更多的美化还是可以再添加的,希望对大家有用。再见~~~

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复