A tutorial on how to remove the white background and borders of the input input box on the HTML5 page end of the mobile end

The first two days in the development of micro-letter access to the HTML5 page, which has an order query to select the time, just start using the <input type= "date" > Input box, without any style, the effect is a white background plus the ugly border, completely with the entire background is not coordinated.

Just started setting the input box background color transparent (background-color:transparent;), the background color and the border is not on the iOS, but in the andriod top border and background color still exists. Later, with the style Filter:alpha (opacity=0), the border and background are removed from the andriod.

Removing the background and border is much better than it used to be, but because the type is date, there is an icon on the right, it feels uncoordinated, plus appearance:none; the style icon is gone, better than before. The following illustration is an effect:

JSP Part code:

<div>                             <i Nput type= "Date" name= "Querydate" id= "querydate" value= "" onchange= "changedate ();" />                "class=" Imgcen "onclick=" updateDate (1); " Style= "Margin-left: -8px;" />          </div>

Input box Style code:

. Date Input[type=date] { Background-color:transparent; Color: #fff; Filter:alpha (opacity=0);/*androd*/ Appearance:none; /* Dropdown box to remove the right icon * * -moz-appearance:none; -webkit-appearance:none; }