详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）

前两天在开发在微信访问的HTML5页面，里面有个订单查询要选择时间，刚开始使用的&lt;input type="date"&gt;输入框，没加任何的样式，效果是白色的背景再加上边框很丑，完全与整个背景不协调。 刚开始设置了输入框背景色透明（background-color:transparent;），在iOS上面背景色和边框都没有了，但是在andriod上边框和背景色还是存在。后来加上样式FILTER: alpha(opacity=0)，在andriod中就去掉了边框和背景。 去掉背景和边框比以前好看多了，但是因为类型是date,所以右边有个图标，感觉不协调，加上appearance:none;样式图标没 在移动端HTML5页面开发中，有时我们希望对`input`输入框进行自定义设计，以使其更好地融入页面的整体风格。本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签来让用户选择日期。默认情况下，这个输入框会带有白色背景和边框，这在某些背景下可能显得突兀。为了解决这个问题，我们可以使用CSS来调整`input`元素的样式。 一开始，开发者尝试设置`background-color: transparent;`来使输入框背景透明。在iOS设备上，这个方法可以成功地移除背景和边框，但在Android设备上，边框和背景颜色依然存在。这是因为不同浏览器对CSS样式的支持程度有所不同。为了解决Android设备上的问题，开发者添加了`FILTER: alpha(opacity=0);`，这个CSS滤镜在Android的Webview中可以消除背景和边框，实现了预期的效果。 然而，`type="date"`的输入框在右侧通常会有一个小图标，这在设计上可能不理想。为了去掉这个图标，开发者应用了`appearance:none;`样式。`appearance`属性允许我们改变元素的默认外观，设置为`none`可以去除浏览器默认的UI样式。由于`appearance`不是所有浏览器都支持的标准属性，所以还添加了 `-moz-appearance` 和 `-webkit-appearance` 的前缀，以确保在Firefox和Safari等浏览器中也能生效。 以下是具体的CSS代码示例： ```css .date input[type=date] { background-color: transparent; color: #fff; FILTER: alpha(opacity=0); /* Android */ appearance: none; /* 下拉框去掉右侧图标 */ -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari 和 Chrome */ } ``` 这段CSS代码将会作用于所有class为`.date`且`type`为`date`的`input`元素，将它们的背景设为透明，文字颜色设为白色，并移除边框和选择日期的小图标。 需要注意的是，虽然这种方法能够解决大部分兼容性问题，但仍然可能存在一些老版本或非主流浏览器不支持的情况。因此，在实际开发中，我们还需要进行充分的测试，确保在各种设备和浏览器环境下都能得到预期效果。此外，对于更复杂的需求，可以考虑使用自定义的日历组件，以获得更大的设计自由度和更好的用户体验。