질문

암호:

<label class="form__label" for="urgency">Urgency</label>

            <input class="form__input no-input-animation" id="urgency" name="urgency" type="radio" required>
                <div class="urgency-text critical">Critical</div>
                <div class="urgency-text high">High</div>
                <div class="urgency-text medium">Medium</div>
                <div class="urgency-text low">Low</div>

각 긴급 div가 하나의 옵션으로 집합 적으로 하나의 radio button이 표시됩니다. 이유를 이해할 수 있습니다.

내 button에 라디오 확인란이없고 각 div가 value속성이있는 자체 옵션이되기를 원합니다.

예:

상태 선택 :

[사용 가능] [유휴] [방해 금지]

대괄호 []안의 각 항목은 클릭 할 수 있으며 고유 한 값 속성 (예 : 사용 가능

양식 내에서이 작업을 수행하려면 어떻게해야합니까?

감사.

답변1

나는 이것을 예로 참조 할 것을 제안 할 것이다. 나는 이것이 정확히 당신이 찾고있는 것이라고 믿습니다.

<div class="container">

  <div class="segmented-control" style="width: 100%; color: #5FBAAC">
    <input type="radio" name="sc-1-1" id="sc-1-1-1">
    <input type="radio" name="sc-1-1" id="sc-1-1-2">
    <input type="radio" name="sc-1-1" id="sc-1-1-3" checked>

    <label for="sc-1-1-1" data-value="High">High</label>
    <label for="sc-1-1-2" data-value="Medium">Medium</label>
    <label for="sc-1-1-3" data-value="Low">Low</label>
  </div>

CodePen 예 <- 찾고있는.

자세한 내용은 이 블로그 를 방문하세요.

출처 : https://stackoverflow.com/questions/63250542/how-do-i-give-radio-buttons-in-a-form-a-custom-look