> 웹 프론트엔드 > H5 튜토리얼 > 모바일 H5 페이지 입력 상자의 기본 스타일을 제거하는 방법

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

php中世界最好的语言
풀어 주다: 2018-05-24 09:54:28
원래의
5610명이 탐색했습니다.

이번에는 모바일 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿