input태그 반응형 모바일 채택완료
input 태그를 모바일 반응형으로 만드는 중입니다.
크롬에서 모바일로 줄여서 할 때는 밑에 사진과 같이 '연도-월-일'과 '아이콘'이 정상적으로 뜨는데,
실제 모바일 화면에서는 아무 것도 뜨질 않습니다ㅠㅠ.
혹시 해결방법이 있을까요?
HTML
</p>
<p><form class="search_name"><input type="text" placeholder="공연명 검색"></form></p>
<p><form name="공연날짜검색" action="" method="post" placeholder="공연 날짜 검색"></p>
<p> <input type='date' name='concertdate'></p>
<p> </form></p>
<p>
CSS
</p>
<p>#search>div>form {float:left; padding-top:1px; padding-right:20px;}</p>
<p>#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;}</p>
<p>미디어쿼리 CSS
</strong></p>
<p>#search>div form {float:none; display:block; width:100%; padding-top:1px; padding-right:0px; text-align:center;}</p>
<p>#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;}</p>
<p><b>
* 크롬에서 모바일로 변경했을 때
* 실제 모바일 화면
답변 3개
코드상으로는 아이콘은 어떻게 처리했는지 알수가 없네요
꼭 사용해야한다면, 마진이나 패딩으로 아이콘 들어갈 영역을 미리 잡아주시고 백그라운드로 이미지를 넣어도 되고 별도의 블록을 만들어서 포지션으로 조정하셔도 될것 같습니다.
input date는 브라우저마다 약간 다르게 출력할수 있습니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/date">https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/date
특별한 경우가 아니면 이미 만들어진 datapicker를 이용해보시는게 좋을것 같습니다.
https://jqueryui.com/datepicker/#default">https://jqueryui.com/datepicker/#default
https://nhn.github.io/tui.date-picker/latest/tutorial-example02-inline-style">https://nhn.github.io/tui.date-picker/latest/tutorial-example02-inline-style
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
답변 감사합니다~
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인