input태그 반응형 모바일
본문
input 태그를 모바일 반응형으로 만드는 중입니다.
크롬에서 모바일로 줄여서 할 때는 밑에 사진과 같이 '연도-월-일'과 '아이콘'이 정상적으로 뜨는데,
실제 모바일 화면에서는 아무 것도 뜨질 않습니다ㅠㅠ.
혹시 해결방법이 있을까요?
HTML
<form class="search_name"><input type="text" placeholder="공연명 검색"></form>
<form name="공연날짜검색" action="" method="post" placeholder="공연 날짜 검색">
<input type='date' name='concertdate'>
</form>
CSS
#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
#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;}
* 크롬에서 모바일로 변경했을 때
* 실제 모바일 화면
답변 3
코드상으로는 아이콘은 어떻게 처리했는지 알수가 없네요
꼭 사용해야한다면, 마진이나 패딩으로 아이콘 들어갈 영역을 미리 잡아주시고 백그라운드로 이미지를 넣어도 되고 별도의 블록을 만들어서 포지션으로 조정하셔도 될것 같습니다.
input date는 브라우저마다 약간 다르게 출력할수 있습니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/date
특별한 경우가 아니면 이미 만들어진 datapicker를 이용해보시는게 좋을것 같습니다.
https://jqueryui.com/datepicker/#default
https://nhn.github.io/tui.date-picker/latest/tutorial-example02-inline-style
늦게 확인해 죄송합니다ㅠㅠ!! 그렇군요 한번 사용해봐야겠습니다. 감사합니다~
config.php 에 모바일 홈페이지 사용함으로 되어있지는 않으신가요?
define('G5_USE_MOBILE', true); // 모바일 홈페이지를 사용하지 않을 경우 false 로 설정
false로 이미 설정되어 있습니다ㅠㅠ!
placeholder 는 input 태그에 넣으세요
넵 수정했지만, 뜨진 않네요 ㅠㅠ,,
답변 감사합니다~
