input태그 반응형 모바일

input태그 반응형 모바일

QA

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

 

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

833465004_1592185994.8561.png

 

* 실제 모바일 화면833465004_1592186197.4812.jpg

이 질문에 댓글 쓰기 :

답변 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 로 설정
 

placeholder 는 input 태그에 넣으세요

답변을 작성하시기 전에 로그인 해주세요.
전체 418
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT