성장가능성 200% 프론트엔드의 Dev 다이어리

[CSS] accent-color 폼 양식 컬러 셋팅하기 본문

퍼블리싱/css

[CSS] accent-color 폼 양식 컬러 셋팅하기

ZinnaJeong 2023. 6. 29. 13:27

퍼블리싱을 하다보면 폼 요소에 각각 컬러를 지정하는게 너무 귀찮았는데,
accent-color를 사용하면 폼 요소의 디자인 UI의 컬러를 한꺼번에 지정할 수 있어서 편리하다.
 
그치만 모든 폼 양식에 적용되는 것은 아니고
 
폼 양식 중, 
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>
에 적용할 수 있다.
 

<HTML>

<div>
    <fieldset>
      <div class="checkbox">
        <input type="checkbox" name="check" value="1"><label for="">체크1</label>
        <input type="checkbox" name="check" value="2"><label for="">체크2</label>
        <input type="checkbox" name="check" value="3"><label for="">체크3</label>
      </div>
      <div class="radio">
        <input type="radio" name="" id="radio1"><label for="radio1">라디오1</label>
        <input type="radio" name="" id="radio2"><label for="radio2">라디오2</label>
      </div>
      <div class="range">
        <input type="range" min="0" max="100">
        <label for="">레인지</label>
      </div>
      <div class="progress">
        <label for="progress">진행률</label>
        <progress id="progress"></progress>
      </div>
    </fieldset>
  </div>

 
<CSS를 전혀 적용하지 않은 기본 상태>

 
<CSS에 accent-color 적용하기>

@charset "utf-8";

:root {
  --form-color: pink;
}

input[type='checkbox'], input[type='radio'], input[type='range'], progress {
  accent-color:  var(--form-color);
}

이처럼 메인 컬러로 pink를 사용하기로 하여, :root에 핑크 컬러를 변수로 선언해 두었다. 혹여나 프로젝트 중 메인 컬러가 조정된다고 하여도 변수로 선언했기 때문에 여러번 고치지 않아도 되어서 효과적이기 때문!
 
그리고 해당 변수를 적용할 input과 progress에 'accent-color' 속성을 적용하고, 변수를 함께 적어준다.
 
 
<accent-color가 적용된 폼 요소>

이렇게 css의 각각의 컬러가 적용될 부분을 일일이 바꿀필요 없이 accent-color만으로도 손쉽게 같은 컬러의 테마를 적용할 수 있다.
(기본형의 못생긴 폼 요소에서 벗어나기 성공!)
 
 
Can I use it 에서 확인한 브라우저 호환성은 아래와 같다.

 
 

반응형
저작자표시 비영리 변경금지

'퍼블리싱 > css' 카테고리의 다른 글

[CSS] input[type="number"] 증가,감소 화살표 없애기  (0) 2023.02.14
[css/웹 성능 개선] font-display:swap  (0) 2023.02.12
[CSS] select 화살표 디자인 적용하기  (0) 2022.01.29
'퍼블리싱/css' Related Articles more
Comments