php怎么把文本框的边框去掉,如何在文本框中设置清除按钮

有时我们会看到在文本框中的右边会有一个圆圈里面有个×，这其实就是清除按钮，那么如何在文本框中来实现这个清除按钮呢？接下来的这篇文章就来给大家介绍关于在文本框中设置清除按钮的方法。

我们先来看一下设置清除按钮具体的示例

代码如下

HTML代码

CSS代码

style.css.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”，它是一个紧紧围绕文本框的框架。

运行结果

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

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

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

php怎么把文本框的边框去掉,如何在文本框中设置清除按钮相关推荐

php怎么把文本框的边框去掉,php如何清除文本框
php清除文本框的方法:1.在javascript中使用submit按钮的onclick处理程序:2.使用php代码[if(count($_post)>0){...}]方法清除文本框. php清 ...
python treeview文本自动换行显示_在tkinter.ttk.Treeview列中设置文本格式
我想知道如何调整ttk.Treeview列中的文本.下面是我的意思的一个例子.请注意日期和数字之间的位置不正确.我认为这和间距有关,但我可能错了. 编辑:用Python 3编写.#! coding=u ...
wps表格中文本框的边框怎么去掉？
在WPS中进行表格编辑时,有时候需要去除文本框的边框,让整个文档看起来更加协调,也更加美观.具体要如何操作呢?下面小编就来教教大家怎么把WPS表格中文本框的边框去掉. 怎么把wps表格中文本框的边框去 ...
Flutter TextField 边框样式以及提示文本、Flutter输入文本TextField
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. github? 你可能需要百度同步 CSDN 网易云课堂教程掘金知乎 Flutter系列文章头条同步本文章首发于微信公众号( ...
python tkinter 文本框全选_Python Tkinter Entry(文本框)
Python学习记录--关于Tkinter Entry(文本框)的选项.方法说明,以及一些示例. 属性(Options) background(bg) Type: color 说明:文本框的背景颜色 ...
Android中设置显示文本,Android文本显示控件-TextView属性详解
android:autoLink //设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phone/map/all) andr ...
word中字体 html,在Word 2010中设置文本字体
在本章中,我们将讨论如何在Word 2010中设置文本字体和大小.Microsoft字允许您使用不同大小的不同字体.您可以通过更改字体及其大小来更改文档的外观.通常您会为段落和标题使用不同的字体.学习 ...
文本框：边框变色——百度-登录界面
案例:百度-登录界面 1.元件准备 2.设置文本框变色,当焦点进入输入框时,输入框边框变为蓝色:失去焦点时,恢复灰色. 步骤手机/邮箱/用户名框 ①拖入1个矩形框,并命名为Border01 ②设置矩 ...
speedoffice表格如何去除文本框的边框？
在Excel中有时我们插入的文本框需要去掉边框,那么,该如何设置呢?今天就用极速办公产品来教教大家. 1.首先,鼠标点击顶端的"插入"选项,找到"文本框"图标, ...

php怎么把文本框的边框去掉,如何在文本框中设置清除按钮

php怎么把文本框的边框去掉,如何在文本框中设置清除按钮相关推荐

最新文章

热门文章