쥐도 새도 모르게 크롬이 업데이트 되면서 input 요소들에 검은색 테두리가 생기고 select의 option에 배경색이 바뀌는 상황 해결책!

크롬 주소창에 chrome://flags/#form-controls-refresh

Web Platform Controls updated UI 의 값이 default나 enable일 경우 disable로 변경

*크롬이 재시작 되므로 작업 중인 내용이 소실되지 않도록 주의


이런 것 좀 사용자들한테 실험하지 마라고... ㅡㅡ css 잘못된 줄 알고 당황했잖아

<input ~~~ required /> 처럼 입력란이 필수인 경우,

입력을 하지 않고 submit을 하면 브라우저 별로 기본적으로 설정되어 있는 알림 메시지가 나타난다.

이 때, <input ~~~ required oninvalid="this.setCustomValidity('텍스트 내용')" oninput="setCustomValidity('input에 on되면 나올 내용')" /> 을 설정해주면, 해당 알림 메시지를 수정할 수 있다.

주의할 점은, oninvalid만 사용할 경우 알림 메시지는 변경되어 나타나지만 form이 정상 작동하지 않으므로 반드시 oninput을 함께 사용해야 한다.

oninput의 경우 setCustomValidity의 텍스트를 공백으로 두면 아무런 메시지가 나오지 않고 유효성 검사를 진행되게 할 수도 있다.

모바일 환경에 맞춰서 반응형으로 웹을 구축하고 배경도 줬는데


막상 실제 모바일에서 input에 입력하려고 하면 가상키보드가 나타나면서 body 자체가 강제로 크기가 바뀌며 배경이 밀리고 하얀화면이 나타난다


이를 해결하기 위해 바디값을 120% 200% 5000% 로 미친듯이 늘리거나 밀리면 안될 부분을 position : fixed 로 고정시키거나


input에 focus가 오면 강제로 크기를 조절시키는 등 별의 별짓을 다 해봤지만 소용이 없던 와중...


한 네이버 블로그의 글을 보고 바로 해결이 되었다.


[출처] [jQuery Mobile] 소프트 키보드 때문에 footer가 위로 올라와 레이아웃이 망가질 때|작성자 아키

(https://blog.naver.com/soulic_/220550333826)


빈 div를 하나 만들고 그 div에 높이를 무조건 화면크기만큼 줘버리는 것


즉,


<body>


<div class="test"></div>


</body>


<style>

.test {

position:fixed;

top:0px;

left:0px;

width:100%;

height:100%;

}

</style>


<script> /* 제이쿼리 사용 */


$(function () {

$(".test").css('height',window.innerHeight);

});

</script>


이렇게하면 가상키보드가 강제로 body를 밀어도 div 가 무조건 화면크기만큼을 차지하고 있기 때문에 레이아웃이 틀어지지 않는다.


다만 배경색이나 이미지를 이것저것 많이 집어넣었다면... 장담 불가


모바일 전용 페이지에 배경을 여러가지 쓸 일이 거의 없겠지만...


그리고 애초에 배경이 흰색(#fff) 라면 밀리든 말든 신경 쓸 필요도 없다. 어차피 흰색이라.................................................................ㅋㅋ...


다 흰색으로 해버리고 싶다 ㅠㅠ 팬톤에서 올해의 컬러로 흰색 지정 안해주려나 순수한 #fff 의 흰색으로 ㅋㅋㅋ

<input> 의 type 중 date 나 datetime-local 등을 선택하면 브라우저에 따라 모양이 다른데,


구글 크롬에서는 옆에 값을 조절하는 화살표 "스핀버튼" 이 나타난다.


 (이렇게 위 아래로 화살표가 생기며 한번 클릭 할 때마다 카운트가 하나씩 증감)



경우에 따라서는 간편하게 값을 조절하는 유용한 버튼이지만,


디자인 적인 측면에서는 상당히 보기 싫은 경우가 있다.


이럴 때 이 스핀버튼을 깔끔하게 제거하고 싶다면 아래와 같이 입력한다.




<style>


input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}


</style>




(스타일이 적용된 모습)




스핀버튼이 흔적도 없이 제거된 것을 확인할 수 있다.

+ Recent posts