모바일 HTML5 페이지 입력창의 흰색 배경 및 테두리 제거 (안드로이드, iOS 호환)

이틀 전 WeChat에서 액세스한 HTML5 페이지를 개발하던 중에 시간을 선택해야 하는 주문 쿼리가 있었습니다. 방금 사용한 입력란에 스타일이 추가되지 않았습니다. 효과는 흰색이었습니다. 배경과 테두리가 보기 흉하고 전체 배경과 완전히 일치하지 않습니다.

배경과 테두리를 제거하니 이전보다 훨씬 나아졌으나, 종류가 날짜라서 오른쪽에 아이콘이 있어서 조화롭지 못한 느낌이 듭니다. 이전보다 좋아 보입니다. 아래 그림은 효과입니다:

jsp 코드 부분:

<p>  
            <img  src="/static/imghw/default1.png"  data-src="<c:url value="  class="lazy"  /images/weixin/timeQ.png"/ alt="모바일 HTML5 페이지 입력창의 흰색 배경 및 테두리 제거 (안드로이드, iOS 호환)" >" class="imgCen" onclick="updateDate(-1);"/>  
            <input type="date" name="queryDate" id="queryDate" value="" onchange="changeDate();"/>   
            <img  src="/static/imghw/default1.png"  data-src="<c:url value="  class="lazy"  /images/weixin/timeH.png"/ alt="모바일 HTML5 페이지 입력창의 흰색 배경 및 테두리 제거 (안드로이드, iOS 호환)" >" class="imgCen" onclick="updateDate(1);"   style="max-width:90%"/>  
        </p>

입력 상자 스타일 코드:

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

위는 모바일 HTML5 페이지 입력창의 흰색 배경과 테두리를 제거합니다. (안드로이드, iOS 호환) 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

관련 기사:

모바일 HTML5 성능 최적화

어떻게 모바일 HTML5를 개발하나요? PC버전과 어떤 차이가 있나요?

사용자에게 모바일 HTML5 애플리케이션이 정말 필요한가요? 그렇다면 수요 시나리오는 무엇입니까?