input 태그를 모바일 반응형으로 만드는 중입니다. 크롬에서 모바일로 줄여서 할 때는 밑에 사진과 같이 '연도-월-일'과 '아이콘'이 정상적으로 뜨는데, 실제 모바일 화면에서는 아무 것도 뜨질 않습니다ㅠㅠ. 혹시 해결방법이 있을까요? HTML [code] [/code] CSS [code] #search>div>form {float:left; padding-top:1px; padding-right:20px;} #search>div>form>input {width:380px; height:40px; text-align:center; font-size:16px; font-weight:300; letter-spa...

이전 목록 다음

채택완료

input태그 반응형 모바일

카멜리아

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2020-06-15 (월) 10:57:11 4,436

input 태그를 모바일 반응형으로 만드는 중입니다.

크롬에서 모바일로 줄여서 할 때는 밑에 사진과 같이 '연도-월-일'과 '아이콘'이 정상적으로 뜨는데,

실제 모바일 화면에서는 아무 것도 뜨질 않습니다ㅠㅠ.

혹시 해결방법이 있을까요?

HTML

Copy

<form class="search_name"><input type="text" placeholder="공연명 검색"></form>

<form name="공연날짜검색" action="" method="post" placeholder="공연 날짜 검색">

          <input type='date' name='concertdate'>

 </form>

CSS

Copy

#search>div>form {float:left; padding-top:1px; padding-right:20px;}

#search>div>form>input {width:380px; height:40px; text-align:center; font-size:16px; font-weight:300; letter-spacing:0.1em; color:#aaa; font-family:inherit; padding-left:50px; border:none;}

미디어쿼리 CSS

Copy

#search>div form {float:none; display:block; width:100%; padding-top:1px; padding-right:0px; text-align:center;}

#search>div form>input {display:inline-block; width:88%; height:40px; text-align:center; font-size:16px; font-weight:300; letter-spacing:0.1em; color:#aaa; font-family:inherit; padding-left:0px; background:#fff;}

* 크롬에서 모바일로 변경했을 때

833465004_1592185994.8561.png