How to remove the default style of the input box on the mobile H5 page

This time I will show you how to remove the default style of the input input box on the mobile H5 page. What are the precautions for removing the default style of the input input box on the mobile H5 page? The following is the actual combat Let’s take a look at the case. I was developing an HTML5 page accessed on WeChat two days ago. There is an order query in which you need to select a time. The input box that I just used did not add any styles. The effect is that the white background and the border are ugly and completely inconsistent with the entire background.

I just set the background color of the input box to be transparent (

background-color

:transparent;). On iOS, the background color and border are gone, but on Android, the border and background color are still the same. exist. Later, the style FILTER: alpha(opacity=0) was added, and the border and background were removed in andriod. Removing the background and borders looks much better than before, but because the type is date, there is an icon on the right, which feels uncoordinated, and the

appearance

:none; style icon is gone, and the It looked better before. The picture below is the effect:

jsp Partial code:

<p>  
            <img src="<c:url value="/images/weixin/timeQ.png"/>" class="imgCen" onclick="updateDate(-1);"/>  
            <input type="date" name="queryDate" id="queryDate" value="" onchange="changeDate();"/>   
            <img src="<c:url value="/images/weixin/timeH.png"/>" class="imgCen" onclick="updateDate(1);" style="margin-left: -8px;"/>  
        </p>

Input box style code:

.date input[type=date] {  
    background-color:transparent;  
    color:#fff;  
    FILTER: alpha(opacity=0); /*androd*/  
    appearance:none;  /*下拉框去掉右侧图标*/  
    -moz-appearance:none;  
    -webkit-appearance:none;  
}

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

Detailed explanation of the use of date-related functions in JS

How to develop WeChat wall with Node.js

The above is the detailed content of How to remove the default style of the input box on the mobile H5 page. For more information, please follow other related articles on the PHP Chinese website!