HTML input type number 우측 화살표 제거하기 input tag 를 type number를 사용했을 때 해당 태그에 포커스를 주면 우측에 숫자를 +1, -1 할 수 있는 화살표가 생성된다. 제거하고 싶다면 아래 코드를 작성하면 된다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type='number'] { -moz-appearance: textfield; }
class와 id 선택자를 중심으로 살펴보는 효율적인 렌더링을 위한 CSS 활용 참고: https://csswizardry.com/2011/09/writing-efficient-css-selectors/ 선택자에 따라 CSS 의 성능 차이가 궁금해서 찾아봤다. 정리 1. 되도록이면 class를 사용하자 선택자에 따른 reflow 속도가 가장 빠른 건 id이지만 class와 별반 차이가 없다. 심지어 윈도우 환경에서 파이어폭스 6 브라우져에서는 class가 더 빨랐다. 또 id는 class보다 우선순위 점수가 월등히 높아서 id와 class를 혼용해서 사용 시 사이드 이펙트가 발생할 여지가 있다. id는 js에서만 이용하고 스타일에서는 class만 사용하자. 2. 되도록 적은 수의 선택자를 사용하자 #te..
html button 요소에 type을 지정하는 이유 참고: https://nykim.work/96 내용 eslint를 세팅하다가 button 요소에 type을 넣으라는 경고문을 봤다. button은 type을 지정하지 않으면 기본적으로 submit 버튼이 되기 때문이다. 즉, form 태그 내에서 예상치 못한 submit 이벤트를 발생시킬 수 있고 시멘틱 마크업 측면에서도 button 에 type을 지정해주는 것이 바람직하다.
iOS에서 기본 적용된 input shadow 제거하기 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance 내용 작업 중 위와 같이 원인 모를 shadow가 생겨 골치 아팠는데 구글링을 해보니 iOS에 기본적으로 적용된 스타일이라고 한다. appearance 라는 값을 없애주면 된다. 구현 input { appearance: none; -webkit-appearance: none; -moz-appearance: none; }