[Blazor] input tag CircleCheckBox 만들기

웹 프로그래밍/Blazor
2022. 11. 23. 23:00

개요

현재 Blazor 에서 TodoList 를 개발 하고 있습니다.
여기서 CheckBox 는 Input 태그를 이용하여 CheckBox Type 을 지정해 주었습니다.
기본 모습은 사각형 모양의 체크 박스입니다.
HTML 에서 Input Tag 를 이용하여 CircleCheckBox 를 구현할 수 있습니다.
어떻게 구현하는지 예제 코드를 작성하여 보여드리도록 하겠습니다.

HTML 코드

Input 태그를 이용하여

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div>
        <input type="checkbox" class="rounded-checkbox" />
        <input type="checkbox" class="rounded-checkbox" />
        <input type="checkbox" class="rounded-checkbox" />
        <input type="checkbox" class="rounded-checkbox" />
        <input type="checkbox" class="rounded-checkbox" />
        <input type="checkbox" class="rounded-checkbox" />
        <input type="checkbox" class="rounded-checkbox" />
    </div>
</body>

</html>

위와 같이 input 태그에서 type을 checkbox 로 지정해 주었습니다.
그리고 class 속성으로 rounded-checkbox 로 지정하였습니다.
이제 CSS 를 추가하여 CheckBox 를 원형으로 변경해 보도록 하겠습니다.

.rounded-checkbox {
    width: 35px;
    height: 35px;
    font-size: 30px;
    margin-top: 13px;
    margin-right: 25px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid gray;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.rounded-checkbox:checked {
    appearance: auto;
    clip-path: circle(50% at 50% 50%);
    accent-color: #9b59b6;
}

위와 같은 CSS 속성을 통해서 Input Tag 의 CheckBox 를 원형으로 변경할 수 있습니다.

실행 결과

실행 결과, 정상적으로 CheckBox 모형이 원형으로 변경된 것을 확인할 수 있습니다.

728x90

저작자표시 비영리

'웹 프로그래밍 > Blazor' 카테고리의 다른 글

[Blazor] 모범사례 5 - CssBuilder 및 StyleBuilder를 사용하여 클래스 및 스타일 조작 (0)	2022.11.26
[Blazor] 모범사례 4. 올바른 매개변수 (0)	2022.11.24
[Blazor] 모범사례 3- CSS를 사용한 구성 요소 파일 및 스타일 지정 (0)	2022.11.20
[Blazor] 모범사례 2 - 구성 요소에 대한 명확한 폴더 및 네임스페이스 구조 (0)	2022.11.20
[Blazor] 모범사례 1 - Razor 클래스 라이브러리 프로젝트에 앱 구성 요소 넣기 (0)	2022.11.19