CSS去除和修改input[type=search]后面的小x样式

默认情况下input[type=search],当有输入时,在输入框后会有一个”x“,用于快速清除输入的内容。但有时样式和页面不搭配,需要删除或者修改样式。

删除webkit-search-cancel-button

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

修改webkit-search-cancel-button

input::-webkit-search-cancel-button {
   /**移除默认样式**/
   -webkit-appearance: none;
   position: relative;
   height: 15px;
   width: 15px;
   border-radius: 50%;
   /**使用自定义的背景图替换默认X  **/
   background: url("custome-clear.png") no-repeat center;
   background-size: 100% 100%;
   color:rgba(0,0,0,0);
}

 

版权声明:著作权归作者所有。

相关推荐

微信小程序动态修改页面标题

在微信小程序的开发中,如果页面的状态改变,需要动态的修改微信小程序的页面的标题,可以通过微信小程序提供的API,wx.setNavigationBarTitle来实现动态的修改微信小程序的页面标题。静态设置页面标题在对应页面的json文件里面加入下面代码就可以实现页面标题的设置:{ "navigationBarTitleText": "当前页标题"}动态设置页面标题下面是动态修改微信小程序的

CentOS 7查看和修改时区

查看时区$ date -RMon, 07 May 2018 18:42:45 +0800+0800表示东8区列出所有时区timedatectl list-timezones修改时区修改为上海时区timedatectl set-timezone Asia/Shanghai时区相关文件所有的时区可以在/usr/share/zoneinfo下找到,设置的本地时区文件在/etc/localtime。查看/

微信小程序WXSS样式

WXSS是微信小程序专用的样式语言,用来描述WXML的组件样式。它和CSS类似,但针对小程序的场景做了扩展。WXSS主要体现在这几方面:尺寸单位rpx样式导入内联动态样式全局和局部样式尺寸单位WXSS引入了新的尺寸单位rpx(responsive pixel),规定所有屏幕的宽度固定为750rpx。如果直接在WXSS使用px,由于屏幕的分辨率不同就会导致px定义的元素显示不一样。使用响应单位rpx

CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/  input::-webkit-input-placeholder {    color:#999;     font-s

MySQL查看和修改时区time_zone

查看时区mysql> show variables like "%time_zone%"; +------------------+--------+ | Variable_name   | Value  | +------------------+--------+ |&

Html5使用CSS修改输入框的placeholder颜色

这里需要使用伪元素的方式对input的placeholder设置样式,且不同的浏览器伪元素不一样。兼容多个浏览器的方法:::-webkit-input-placeholder { /* WebKit, Blink, Edge */     color: