라디오 버튼의 색상을 어떻게 변경합니까?

programing

라디오 버튼의 색상을 어떻게 변경합니까?

javajsp 2023. 10. 26. 20:44

라디오 버튼의 색상을 어떻게 변경합니까?

즉, 라디오 버튼 자체가 둥근 모양과 가운데에 점이 있습니다(버튼을 선택했을 때).제가 바꾸고 싶은 것은 둘 다 색깔입니다.이것은 CSS를 사용해서 할 수 있습니까?

빠른 수정은 다음을 사용하여 라디오 버튼 입력 스타일을 오버레이하는 것입니다.:after

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

<input type='radio' name="gender"/>
<input type='radio' name="gender"/>

라디오 버튼은 각 OS/브라우저에 고유한 기본 요소입니다.사용자 지정 이미지를 구현하거나 이미지가 포함된 사용자 지정 자바스크립트 라이브러리(예: 캐시 링크)를 사용하지 않는 한 색상/스타일을 변경할 수 없습니다.

CSS를 사용할 수 있습니다.accent-color색상을 변경할 속성입니다.

input[type='radio'] {
    accent-color: #232323;
}

Chrome/Edge 93+, Firefox 92+, Safari 15.4+(캐니유즈의 브라우저 지원 정보)와 연동됩니다.

프레드가 언급한 것처럼, 라디오 버튼의 색상, 크기, 등에 관해서는 기본적으로 스타일을 지정할 수 있는 방법이 없습니다.그러나 CSS Pseudo 요소를 사용하여 주어진 라디오 버튼의 임포스터를 설정하고 스타일을 지정할 수 있습니다.Jamie D가 말한 것을 터치하면서 :after Pseudo 요소를 어떻게 사용할 수 있는지에 대해서는 :before와 :fter를 모두 사용하여 바람직한 모양을 만들 수 있습니다.

이 접근 방식의 이점:

라디오 단추 스타일을 지정하고 내용 레이블도 포함합니다.
외부 테두리 색상 및/또는 선택한 원을 원하는 색상으로 변경합니다.
배경색 속성을 수정하거나 불투명 속성을 선택적으로 사용하여 투명하게 보입니다.
라디오 단추의 크기를 조정합니다.
필요한 곳에 CSS 드롭 섀도우 인셋 등 다양한 드롭 섀도우 속성을 추가합니다.
이 간단한 CSS/HTML 트릭을 부트스트랩 3.3.6과 같은 다양한 그리드 시스템에 혼합하여 부트스트랩 구성 요소의 나머지 부분과 시각적으로 일치시킵니다.

아래 짧은 데모 설명:

각 라디오 버튼에 대해 상대 인라인 블록 설정
네이티브 라디오 버튼 감각을 숨겨라 직접 스타일을 지정할 방법이 없습니다.
레이블 스타일 및 정렬
:fore Pseudo-element to do 2things - 라디오 버튼의 바깥 테두리 스타일을 만들고 요소를 먼저 표시(레이블 컨텐츠 왼쪽)하도록 설정합니다.여기서 유사 요소에 대한 기본 단계를 배울 수 있습니다 - http://www.w3schools.com/css/css_pseudo_elements.asp
라디오 버튼이 선택되어 있는 경우, 이후 CSS 콘텐츠(라디오 버튼 내 스타일 도트)를 표시할 라벨을 요청합니다.

HTML.

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

실제 상황을 확인할 수 있는 간단한 데모

결론적으로 자바스크립트, 이미지, 배터리가 필요 없습니다.순수 CSS.

두 가지 순수한 CSS 방식으로 맞춤형 라디오 버튼을 얻을 수 있습니다.

CSS를 사용하여 표준 외관 제거를 통해appearance사용자 지정 외관을 적용합니다.안타깝게도 IE에서는 이것이 작동하지 않습니다.모:

input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
  display: flex;
  align-items: center;
}

<div class="flex">
  <input type="radio" name="radio" id="radio1" />
  <label for="radio1">RadioButton1</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">RadioButton2</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">RadioButton3</label>
</div>

라디오 단추 숨기기 및 사용자 지정 라디오 단추 모양 설정label의 의사 선택자입니다.그건 그렇고 여기서 절대 위치는 필요 없습니다(대부분의 데모에서 절대 위치가 보입니다).모:

*,
*:before,
*:after {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  margin-right: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
label {
  display: flex;
  align-items: center;
}

<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>

웹킷 기반 브라우저(Chrome 및 Safari, 어쩌면 Chrome WebApp을 개발하고 있는지도 모르며...)를 대상으로 하는 경우에만 다음을 사용할 수 있습니다.

input[type='radio'] {
   -webkit-appearance: none;
}

그런 다음 배경 이미지를 적용하는 등 간단한 HTML 요소인 것처럼 스타일을 지정합니다.

사용하다input[type='radio']:active입력을 선택한 경우 대체 그래픽을 제공합니다.

업데이트: 2018년 현재 여러 브라우저 벤더를 지원하기 위해 다음을 추가할 수 있습니다.

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

다음과 같은 것을 시도해 보십시오.

#yes{
  border:2px solid white;
  box-shadow:0 0 0 1px #392;
  appearance:none;
  border-radius:50%;
  width:12px;
  height:12px;
  background-color:#fff;
  transition:all ease-in 0.2s;

}
#yes:checked{
  background-color:#392;
}
#no{
  border:2px solid white;
  box-shadow:0 0 0 1px #932;
  appearance:none;
  border-radius:50%;
  width:12px;
  height:12px;
  background-color:#fff;
  transition:all ease-in 0.2s;

}
#no:checked{
  background-color:#932;
}

<input id="yes" type="radio" name="s"><label for="yes">Yes</label></br>
<input id="no" type="radio" name="s"><label for="no">No</label>

코드가 적고, 보기 좋고, 가지고 놀 필요가 없습니다.:before,:after그리고.position효과에 도달하기 위해서 입니다.

CSS 트릭에서 설명된 것처럼 체크박스 해킹을 사용할 수 있습니다.

http://css-tricks.com/the-checkbox-hack/

라디오 버튼의 작동 예:

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome에서 무엇이든 작동합니다.

단순 교차 브라우저 사용자 지정 라디오 버튼 예제

.checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
    background-size: 12px;
    position: relative;
    top: 1px;
    left: -2px;
}

<div class="checkbox">
  <input type="radio" name="sort" value="popularity" id="sort1">
  <label for="sort1">
        <i></i>
        <span>first</span>
    </label>

  <input type="radio" name="sort" value="price" id="sort2">
  <label for="sort2">
        <i></i>
        <span>second</span>
    </label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

추가적인 요소를 만들기 위해 :fore, :before (따라서 HTML을 그렇게 많이 변경할 필요가 없습니다)를 사용할 수 있습니다.그런 다음 라디오 버튼과 확인란을 사용할 수 있습니다 :checked.우리가 사용할 수 있는 몇 가지 다른 의사 요소가 있습니다(예: hover).이들을 혼합하여 사용하면 꽤 멋진 맞춤형 양식을 만들 수 있습니다.이것을 확인합니다.

저는 :before/:fter pseudo elements와 숨겨진 라디오 입력 버튼을 사용하여 순수한 css와 그래디언트로 플레이하는 것을 시연하기 위해 @klewis의 코드 샘플의 또 다른 포크를 만들었습니다.

HTML:

sample radio buttons:
<div style="background:lightgrey;">
    <span class="radio-item">
        <input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
        <label for="ritema">True</label>
    </span>

    <span class="radio-item">
        <input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
        <label for="ritemb">False</label>
    </span>
</div>

CSS:

.radio-item input[type='radio'] {
    visibility: hidden;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0;
}
    .radio-item input[type=radio]:before {
        position: relative;
        margin: 4px -25px -4px 0;
        display: inline-block;
        visibility: visible;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px inset rgba(150,150,150,0.75);
        background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
        content: "";
    }
        .radio-item input[type=radio]:checked:after {
            position: relative;
            top: 0;
            left: 9px;
            display: inline-block;
            visibility: visible;
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            content: "";
        }
            .radio-item input[type=radio].true:checked:after {
                background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            }
            .radio-item input[type=radio].false:checked:after {
                background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
            }
.radio-item label {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

미리보기: https://www.codeply.com/p/y47T4ylfib

최소한의 예를 들어 개발을 시작하고자 하는 사람들을 위해, 여기에 의존하지 않는 간단한 사용자 지정 라디오 버튼이 있습니다.label:

[type="radio"] {
    visibility: hidden; /* hide default radio button */
  /* you may need to adjust margin here, too */
}
[type="radio"]::before { /* create pseudoelement */
    border: 2px solid gray; /* thickness, style, color */
    height: .9em; /* height adjusts with font */
    width: .9em; /* width adjusts with font */
    border-radius: 50%; /* make it round */
    display: block; /* or flex or inline-block */
    content: " "; /* won't display without this */
    cursor: pointer; /* appears clickable to mouse users */
    visibility: visible; /* reverse the 'hidden' above */
}

[type="radio"]:checked::before { /* selected */
  /* add middle dot when selected */
  /* slightly bigger second value makes it smooth */
  /* even more (e.g., 20% 50%) would make it fuzzy */
    background: radial-gradient(gray 36%, transparent 38%);
}

<br>
<input type="radio" name="example" id="one" value="one">
<label for="one">one</label>
<br>
<br>
<input type="radio" name="example" id="two" value="two">
<label for="two">two</label>

심플하게 포인트 컬러로 사용 가능합니다.

페이지소스보기

<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>

    <style>
        input[type=radio] {
            accent-color: red;
        }
    </style>
</head>
<body>
    <label for="css">Are you like to css</label>
    <input type="radio" id="css" value="css">
</body>
</html>

전환과 함께 이 CSS를 사용해 보십시오.

데모

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

html:

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

css에서 악센트-컬러 속성을 사용하여 확인란과 라디오 버튼 모두의 배경색을 변경할 수 있습니다.

input[type=radio] {
  accent-color: red;
}

입력(라디오 버튼, 확인란 등)이나 프로그레스 바와 같은 사용자 인터페이스 컨트롤의 액센트 색상을 설정하는 CSS 속성을 사용해야 하며 대부분의 최신 브라우저에서 지원됩니다.

input {
    accent-color: red;
}

document.querySelector("input[name=accent-color]").addEventListener("input", () => {
  document.documentElement.style.setProperty("--accent-color", event.target.value);
});

:root {
  --accent-color: red;
}

input,
progress {
  accent-color: var(--accent-color);
}

/* Other styles */
label {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .625rem;
}

label:first-child {
  font-size: 1.15rem;
  font-weight: bold;
}

input {
  flex: 0 0 auto;
  height: 1.25rem;
  width: 1.25rem;
}

input[type="color"] {
  width: 3rem;
}

input[type="range"] {
  width: 12.5rem;
}

<label>Change the accent color<input name="accent-color" type="color" value="#ff0000"></input></label><br>
<label><input name="radio" type="radio" checked></input>Radio button</label>
<label><input name="radio" type="radio"></input>Another radio button</label>
<label><input name="check" type="checkbox" checked></input>Checkbox</label>
<label><input name="range" type="range"></input>Range input</label>
<label><progress value="50" max="100"></progress>Progress bar</label>

네이티브 CSS에서는 불가능합니다.배경 이미지와 자바스크립트 트릭을 사용해야 합니다.

다른 사람이 말했듯이 모든 브라우저에서 이를 달성할 수 있는 방법은 없으므로 크로스브라우저를 수행하는 가장 좋은 방법은 javascript를 눈에 띄지 않게 사용하는 것입니다.기본적으로 라디오 버튼을 링크(CSS를 통해 완전히 사용자 지정 가능)로 전환해야 합니다. 링크를 클릭할 때마다 관련 라디오 박스에 바인딩되어 그의 상태와 다른 모든 것들이 토글됩니다.

제가 원하는 건 색깔만 바꾸는 거였어요 그래서 @klewis에서 답변을 받아서...

고정 px 대신 상대 %와 em을 사용하여 라디오를 브라우저 기본값(내 경우 크롬)과 동일하게 만듭니다.주의사항: em은 글꼴 크기가 무엇이든 기반으로 합니다.input[type=radio]즉, 상속될 수도 있는 것입니다.아래 값을 조정해야 할 수도 있습니다.
사용하지 않음으로써 원래 라디오 버튼의 접근성 기능(초점을 찍을 때 윤곽선 등)을 유지합니다.display: none;적용함으로써:before그리고.:after라벨 대신에 원래 라디오로.

/* make default radio 'invisible' */
input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* make new radio outer circle */
input[type=radio]:before {
  content: " ";
  display: inline-block;
  position: relative;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 1px solid grey;
  background-color: transparent;
}

/* change colour of radio outer circle when checked */
input[type=radio]:checked:before {
  border-color: green;
}

/* make new radio inner circle when checked */
input[type=radio]:checked:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  top: 0.4em;
  left: 0.13em;
  background: green;
}

저한테는 잘 맞았는데요

CSS 속성을 추가하기만 하면 됩니다.

입력[type="radio"]{accent-color: red;}

리소스 링크입니다.

간단한 방법은 사용하는 것입니다.accent-color

accent-colorCSS 속성은 일부 요소에서 생성된 사용자 인터페이스 컨트롤의 액센트 색상을 설정합니다.

액센트-컬러를 지원하는 브라우저는 현재 다음 HTML 요소에 이를 적용하고 있습니다.

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

실행가능한 예

body {
  display: grid;
  padding: 3rem 0;
}

.accent {
  accent-color: #30cc7e;
}

form {
  display: grid;
  grid-auto-columns: fit-content(50%);
  grid-template-areas: "a a";
  margin: auto;
  padding: 0;
  gap: 1rem;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: auto;
}

form section:first-child {
  color-scheme: light;
}
form section:last-child {
  color-scheme: dark;
}

fieldset {
  border-radius: 8px;
  color-scheme: light;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.dark {
  color-scheme: dark;
}

.dark fieldset {
  background: #100f33;
  border-color: #100f33;
  color: #fff;
}

.dark .accent {
  accent-color: hsla(180, 100%, 70%, 1);
}

h2 {
  margin: 0;
}

.notice {
  background: #fff9c4;
  border-radius: 6px;
  margin: 1.5rem auto;
  padding: 0.5rem;
  text-align: center;
}

@supports (accent-color: #fff) {
  .notice {
    display: none;
  }
}

<div class="notice">
  Your browser does not support the <code>accent-color</code> property.
</div>

<form action="">
  <fieldset>
    <h2>Checkboxes</h2>
    <div>
      <label for="checkbox">
        Default
      </label>
      <input id="checkbox" type="checkbox" checked>
    </div>
    <div>
      <label for="checkbox-accent">
        Accent
      </label>
      <input id="checkbox-accent" type="checkbox" class="accent" checked>
    </div>
  </fieldset>

  <fieldset>
    <h2>Radio</h2>
    <div>
      <input id="radio" type="radio" checked>
      <label for="radio">
        Default
      </label>
    </div>
    <div>
      <input id="radio-accent" type="radio" class="accent" checked>
      <label for="radio-accent">
        Accent
      </label>
    </div>
  </fieldset>

  <fieldset>
    <h2>Progress</h2>
    <div>
      <label for="progress">
        Default
      </label>
      <progress id="progress" min="0" max="100" value="50"></progress>
    </div>
    <div>
      <label for="progress-accent">
        Accent
      </label>
      <progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress>
    </div>
  </fieldset>

  <fieldset>
    <h2>Range</h2>
    <div>
      <label for="range">
        Default
      </label>
      <input id="range" type="range">
    </div>
    <div>
      <label for="range-accent">
        Accent
      </label>
      <input id="range-accent" class="accent" type="range">
    </div>
  </fieldset>
</form>

라디오 버튼의 색상과 크기를 변경했습니다.시도해보기

.radio-tile-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.radio-tile-group .input-container {
  position: relative;
  margin: 0.9rem;
}

.radio-tile-group .input-container .radio-button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.radio-tile {
  border: 1px solid #eea236;
}

.radio-tile-group .input-container .radio-tile-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25px;
  font-size: 12px;
  border-radius: 5px;
  padding: 0.2rem;
  transition: transform 300ms ease;
  height: 25px;
}

@media (min-width: 375px) and (max-width: 812px) {
  .radio-tile-group .input-container .radio-tile {
    margin-inline: 18px;
  }
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile {
  border: 3px solid #2980b9;
  font-size: 12px;
  color: #797979;
  transform: scale(1.05, 1.05);
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile .icon svg {
  fill: white;
  background-color: #2980b9;
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile-edit {
  border: 3px solid black;
  /* font-size: 12px; */
  color: #797979;
  transform: scale(1.05, 1.05);
}

<label>Radio button colors:</label>
<br>
<div class="radio-tile-group">
  <div class="input-container">
    <label class="radio-tile-label" style="background-color: #b60205;border-radius: 5px;">
    <input type="radio" value="#b60205" class= "radio-button uncheckall" name="print_color">
     <div class="radio-tile-edit" style="background-color: #b60205;">
    </label>
    </div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #d93f0b; border-radius: 5px;">
  <input type="radio" value="#d93f0b" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #d93f0b;">
  </label>
  </div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #fbca04; border-radius: 5px;">
  <input type="radio" value="#fbca04" class= "radio-button uncheckall" name="print_color">
    <div class="radio-tile-edit" style="background-color: #fbca04;">
    </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #0e8a16; border-radius: 5px;">
  <input type="radio" value="#0e8a16" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #0e8a16;">
  </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #006b75; border-radius: 5px;">
  <input type="radio" value="#006b75" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color:#006b75">
  </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #1d76db; border-radius: 5px;">
  <input type="radio" value="#1d76db" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #1d76db;">
  </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #0052cc; border-radius: 5px;">
  <input type="radio" value="#0052cc" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #0052cc;">
  </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #757575; border-radius: 5px;">
  <input type="radio" value="#757575" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #757575;">
  </label>
</div>
</div>
</div>

라디오 버튼을 스타일 라벨에 바인딩하는 것이 도움이 될 수 있습니다.자세한 내용은 이 답변에서 확인할 수 있습니다.

예를 들어 50px의 높이와 너비를 가진 별도의 디브를 만든 다음 반경 50px의 라디오 버튼에 이를 배치하는 것이 현명한 방법일 것입니다.

무선 입력에 스팬 요소를 내장한 다음 무선 입력을 선택할 때 렌더링할 색상을 선택할 수 있습니다.w3 schools에서 출처한 아래 예시를 확인해보세요.

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>

아래 코드 세그먼트에서 배경색을 변경하면 효과가 있습니다.

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

사용자 지정 라디오 버튼을 만드는 방법에서 출처

리액트 부트스트랩 Form.check을 사용하는 경우 이와 같은 작업을 수행할 수 있습니다.

HTML

<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>

SCSS

.form-check {
    display: flex;
    align-items: center;
    input[type="radio"] {
    -moz-appearance: none;
    appearance: none;
          
    width: 11px;
    height: 11px;
    padding: 1px;
    background-clip: content-box;
    border: 1px solid hotpink;
    background-color: white;
    border-radius: 50%;
    }
          
    input[type="radio"]:checked {
    outline: none;
    background-color: hotpink;
    border: 1px solid hotpink;
    }
    label {
    font-size: 14px;
    font-weight: 600;
    }
}

간단한 수정은 다음 CSS 속성을 사용하는 것입니다.

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}

언급URL : https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons

'programing' 카테고리의 다른 글

문자열 벡터에 대한 조인 연산자의 동등성은 무엇입니까? (0)	2023.10.26
PowerShell - 고유 값 필터링 (0)	2023.10.26
마스터 분기에서 커밋 방지 (0)	2023.10.26
angularjs: 강제 재rendering/ 지시 템플릿 전체 새로 고침 (0)	2023.10.26
C에서 MP3 파일을 재생하는 방법은? (0)	2023.10.26

현재글라디오 버튼의 색상을 어떻게 변경합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

ASP.NET, sql-server, oracle, Excel, jquery, C, Git, Powershell, mongoDB, WordPress, CSS, Python, MariaDB, angularjs, Spring-Boot, bash, JSON, MySQL, Ajax, reactjs,

Today :
Yesterday :

javajsp

라디오 버튼의 색상을 어떻게 변경합니까?

라디오 버튼의 색상을 어떻게 변경합니까?

실행가능한 예

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/10 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

라디오 버튼의 색상을 어떻게 변경합니까?

라디오 버튼의 색상을 어떻게 변경합니까?

실행가능한 예

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바