Details about how to remove the white background and border (compatible with Android and ios) of the input box from the HTML5 page on the Mobile End, html5android

Details about how to remove the white background and border (compatible with Android and ios) of the input box from the HTML5 page on the Mobile End, html5android

In the HTML5 page accessed during development two days ago, there is an order query to select a time. The <input type = "date"> input box that was just used did not add any style, the effect is a white background, and the border is ugly. It is totally different from the whole background.

The background color transparency (background-color: transparent;) of the input box is set at the beginning. The background color and border on iOS are absent, but the border and background color on andriod still exist. Later, the style FILTER: alpha (opacity = 0) is added, and the border and background are removed in andriod.

Removing the background and border looks much better than before, but because the type is date, there is an icon on the right, and it feels uncoordinated, plus appearance: none; the style icon is gone, it looks better than before. Result:

Part of jsp code:

<div>                            <input type="date" name="queryDate" id="queryDate" value="" onchange="changeDate();"/>                         </div>  

Style code in the input box:

. Date input [type = date] {background-color: transparent; color: # fff; FILTER: alpha (opacity = 0);/* androd */appearance: none; /* remove the icon on the right from the drop-down list */-moz-appearance: none;-webkit-appearance: none ;}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.