【CSS美化专题】用CSS美化表格删除按钮

原生的表格删除按钮，是这样的


诶？感觉没啥存在感呀，用户一头雾水还以为这是啥呢，试着点一下才知道这是把当前记录删除的按钮，赶紧取消

这时候就需要我们开发的干点实事了！

首先F12检查元素，我们发现，这是一个<img>标签在类名为deleteButton的<div>下，并且通过ctrl+F查找文档全文并未在其他地方发现同类元素。
我们的CSS选择器就已经出来了

1. div.deleteButton>img{/*img标签*/}
   

复制代码

既然它是一个<img>标签，那么我们就需要用content属性替换当中的图标，而不是background-image。
这时候问题来了，图标从哪里来呢？总不可能上传一个图标文件到网站根目录再通过相对路径引用吧。这时候DataUrl就起了大作用。百度一个图标网站，
比如iconfont.cn , 搜索“delete"

随便点一个自己看着顺眼的，把颜色设置为白色#FFFFFF，图标大小设置成32（别问我为什么不用16，测试了很多个发现16转码后还是太模糊了）
百度一个png转base64的网站，把图标转成DataURL

好了，现在开始魔改<img>标签

1. div.deleteButton>img{
   
2.     border-radius: 10px;
   
3.     background-color:#c5403c;
   
4. content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAQVJREFUWEftltENwyAMRM/rtPOk6zRZp52nXceVJZAiBPhMIqUf5DMJ+HE+2wgufuTi+JgAU4H/V0BVbwAWEdkiFaOqTwBvEfn21nUVSMFfAO4AVhYiBV8BfAA8ehARADuIC7ELbv8fA7AdChW6ENHgthllQgZiJDgN4CkxGjwE0IJIDjfDUTkvK4JKwX5RJR35s2u4WjmGARpKDAUPpyCfoMh5fu2W6CkKVAxn+1qjovrEIQ/U3J42zN0yDEF7oFdqTJ9ozQMKgKnzUQgXgAm+M6dNzlA6vGFkIzXUZKJKsAos3lhtNCu7D3TvES5AbjzexaI0mSnBrKEAWg4+4/0EmApMBX4966MhuxlE9wAAAABJRU5ErkJggg==);
   
5. }

复制代码

大概意思呢，就是加了个圆角，加了个背景色，再换了个图标，现在它是这样的

看着还不错对吧，你以为到这里就结束了？不，既然改了，我哪里会满足于这平庸的效果，让我们再加亿点点特效

1. div.deleteButton{
   
2.     height: 20px !important;
   
3.     margin-top:-2px;
   
4. }
   
5. div.deleteButton>img{
   
6.     width: 20px !important;
   
7.     border-radius: 10px;
   
8.     margin-left: 0px;
   
9.     padding:2px;
   
10.     background-color:#c5403c;
    
11.     content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAQVJREFUWEftltENwyAMRM/rtPOk6zRZp52nXceVJZAiBPhMIqUf5DMJ+HE+2wgufuTi+JgAU4H/V0BVbwAWEdkiFaOqTwBvEfn21nUVSMFfAO4AVhYiBV8BfAA8ehARADuIC7ELbv8fA7AdChW6ENHgthllQgZiJDgN4CkxGjwE0IJIDjfDUTkvK4JKwX5RJR35s2u4WjmGARpKDAUPpyCfoMh5fu2W6CkKVAxn+1qjovrEIQ/U3J42zN0yDEF7oFdqTJ9ozQMKgKnzUQgXgAm+M6dNzlA6vGFkIzXUZKJKsAos3lhtNCu7D3TvES5AbjzexaI0mSnBrKEAWg4+4/0EmApMBX4966MhuxlE9wAAAABJRU5ErkJggg==);
    
12.     box-shadow: 0px 0px 0 1px #00000042 inset, 0px 11.5px 7px -6px #ffffff4a inset, 0px -4px 4px -4px #000000a8 inset;
    
13. }
    
14. div.deleteButton>img:hover{
    
15.     box-shadow:0px 0px 0 0.5px #00000036 inset,
    
16.     0px -1px 2px 0px #ffffff4a inset,
    
17.     0px 4px 4px 0px #00000012 inset,
    
18.     0.5px 1px 5px 0px #00000000 inset;
    
19. }

复制代码

emmmm....按钮被放大了，加了一个阴影，并且鼠标经过还有一个按下的效果，不错不错。不过总感觉还少了点什么
。
。
没错，就是鼠标经过时的提示，用户看到这个图标，会不会知道这是一个删除当前行的按钮？或者理解成取消选中？与其让用户猜，不如我们直接给出提示。但是我们发现这个<img>标签并没有title属性，这时候CSS的:after伪元素帮了我们大忙。

1. div.deleteButton:hover::after{
   
2.     content:"删除当前行";
   
3.     background:#fafafa;
   
4.     width: max-content;
   
5.     height: 20px;
   
6.     position:absolute;
   
7.     display:block;
   
8.     line-height:20px;
   
9.     font-size:12px;
   
10.     z-index: 999;
    
11.     color:#666666;
    
12.     border: 0.5px solid #666666;
    
13.     top: 0px;
    
14.     left: 25px;
    
15. }

复制代码

通过:after伪元素我们成功模拟了title属性，鼠标移上去的时候，在按钮右侧显示一个提示。当然，你要是想，它也可以在上边在下边在左边在右边，随你怎么调整，甚至可以是这样。。。。

够显眼了吧




以下是(正常的)完整代码

游客，如果您要查看本帖隐藏内容请回复

顶楼主啦..希望楼主多发精品好帖啦.....

学习的！多来点精品帖

支持

代码放哪里呢，怎么使用能介绍一下吗，谢谢

这个不错，希望lz能多出点类似的教程

牛人

lucaswang 发表于 2022-4-5 18:12
代码放哪里呢，怎么使用能介绍一下吗，谢谢

可以参考下我在这个贴子里的回答
https://gcdn.grapecity.com.cn/fo ... mp;page=1#pid523749

东西是个好东西！