모바일 H5 페이지 입력 상자의 기본 스타일을 제거하는 방법

이번에는 모바일 H5 페이지에서 입력 입력 상자의 기본 스타일을 제거하는 방법을 알려 드리겠습니다. 모바일 H5 페이지에서 입력 입력 상자의 기본 스타일을 제거하는 방법에 대한 주의 사항은 무엇입니까? 실제 사례를 살펴보겠습니다.

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

입력창의 배경색을 투명하게 설정했을 뿐입니다(Background-color:transparent;). iOS에서는 배경색과 테두리가 없어졌는데 Android에서는 테두리와 배경색이 그대로 남아있습니다. 나중에 FILTER: alpha(opacity=0) 스타일이 추가되었고 테두리와 배경이 andriod에서 제거되었습니다.

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

jsp 코드 부분:

<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>

입력 상자 스타일 코드:

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 내용을 확인하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!

추천 도서:

JS의 날짜 관련 기능 사용에 대한 자세한 설명

Node.js로 WeChat 담벼락을 개발하는 방법

위 내용은 모바일 H5 페이지 입력 상자의 기본 스타일을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!