css3 appearance 改变元素外观

H5 Input 样式定制

最新推荐文章于 2025-09-07 00:18:35 发布

转载最新推荐文章于 2025-09-07 00:18:35 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaofenguo/p/6137680.html

文章标签：

#php

本文介绍如何通过 CSS 的 ::-webkit-clear-button 和 ::-webkit-inner-spin-button 等伪元素来定制 H5 中不同类型的 input 标签的默认样式，包括去除 date 类型的清除按钮、number 类型的上下箭头以及 search 类型的各种特征。

h5 input标签的默认样式去除：

去掉date类型<input>框的叉叉：

::-webkit-clear-button {
     -webkit-appearance: none; 
}

去掉number类型<input>框的上下箭头：

::-webkit-inner-spin-button {
     -webkit-appearance: none;    /* 上下小箭头按钮，你丫太丑了，滚粗，负分 */
}

去掉search类型<input>框的N多特征：

/* 去除圆角 */
input[type=search] { -webkit-appearance: none; }

/* 隐藏取消按钮 */
::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 隐藏放大镜 */
::-webkit-search-results-button { -webkit-appearance: none; }