深入探索CSS3 appearance 属性：解锁原生控件的定制秘密

/* 使用CSS3的appearance属性来重置输入框的样式，
   使其看上去像一个原生控件 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    -webkit-appearance: none; /* 针对WebKit浏览器，如Chrome、Safari */
    -moz-appearance: none;    /* 针对Gecko浏览器，如Firefox */
    -ms-appearance: none;     /* 针对Trident内核浏览器，如IE */
    -o-appearance: none;      /* 针对Presto内核浏览器，如Opera */
    appearance: none;          /* 标准属性 */
 
    /* 添加一些自定义样式 */
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
}
 
/* 重置按钮的样式 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: none;
    padding: 0;
}

这段代码展示了如何使用CSS3的appearance属性来重置输入框和按钮的样式，使它们看上去更接近原生控件的样式。同时，去除了Firefox特有的焦点边框，确保跨浏览器的一致性。这是一个简单而实用的CSS技巧，可以增强表单输入的原生感。