실전 (1) - checkbox랑 select를 이쁘게 꾸미고 싶어!

4358 단어 CSS멋쟁이사자처럼_FE_2기CSS

열심히 input요소들과 select를 만드는데,,, 디자인은 뭔가 아쉽고 ☹️ css 속성들은 내 맘처럼 움직여주지도 않을 때 사용합시다!

1. input custom

  • checkbox랑 radio 디자인을 바꾸고싶어!

    이렇게 못생긴 기본 radio 디자인을 아래의 디자이너가 정해준 디자인으로 바꾸러면 어떻게 해야할까??

  • 그냥 css로 냅다 디자인하기?
    이 방법을 사용할 경우 border color나 size등 일부 수정은 가능하겠지만, 위 사진처럼 예쁜 체크박스 이미지를 사용할 순 없다..!
    우린 저 이미지를 그대로 불러와서 사용하고 싶다.

  • back ground 이미지로 지정하기

    우선, 우리는 원래있던 저 동그라미를 사용하는 게 아니라 예쁜 체크 이미지를 불러올 예정이기 때문에 원래 있던 저 동그라미를 없애주자.

input[type="radio"]{
    display: none;
}
  1. display:none을 사용하여 radio를 안보이게 숨겨 두었다.
    이렇게하면 radio가 아예 사라져서 클릭이 안되니까 기능이 안되는거 아냐? 라고 생각 할 수 있겠지만! 우리는 label을 이용해서 radio와 연결해두었기 때문에 사용 가능하다.
.logincheck{
    content: url(./img/check.png);
}
  1. radio의 content에 url을 이용하여 체크 이미지를 불러주고, 사이즈를 조정해준다.
.logincheck:checked{
    content: url(./img/checked.png);
	outline: 1px solid black;
}
  1. checked라는 가상클래스를 사용하여 클릭되었을때 체크된 이미지로 바뀌게 해준다.
    여기서 outline 을 추가해주면 체크되었을때 밖에 아웃라인 테두리가 생겨 웹접근성에 더욱 좋은 코드를 짤 수 있다.
    ( 그러나 디자이너 분들은 미관상 싫어하실 수 있으니 잘 설득하여 타협점을 찾자..! )

2. select custom

  • css로 select 커스텀하기 ?