如何在文本框中设置清除按钮

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

style.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.searchFrame{

  position: relative;

  display: inline-block;

}

 

.inputBox{

  padding-right: 20px;

  width:120px;

}

 

.searchFrame .clearButton{

  width: 13px;

  height: 13px;

  position: absolute;

  right: 2px;

  top: 1px;

  background: url(img/d.jpg) no-repeat left center;

  cursor: pointer; 

}

说明

上述代码中，在文本框周围准备一个“searchFrame”框架。将清除按钮放在“searchFrame”框架的右端。通过设置样式表的正确属性将其放在右端。“searchFrame”框架被指定为“display：inline-block”，它是一个紧紧围绕文本框的框架。

运行结果

在浏览器上将显示如下效果

清除按钮

你可以像普通文本框一样输入字母。如果将鼠标指针移到最右侧的[×]图标上，则指针的形状会发生变化，此时单击将删除文本框的内容，效果如下

清除按钮

微信截图_20181204165347.png

本篇文章到这里就全部结束了，更多相关的精彩内容大家可以移步到php中文网的CSS视频教程栏目进一步学习！！！

以上就是如何在文本框中设置清除按钮的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

如何在文本框中设置清除按钮

更多相关阅读请进入《清除按钮》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...