88 views

Hoe verander ik de kleur van keuzerondjes?

Hosted by Code Expert
html

Ik bedoel, een keuzerondje zelf bestaat uit een ronde vorm en een stip in het midden (wanneer de knop is geselecteerd). Wat ik wil veranderen is de kleur van beide. Kan dit met CSS?

Antwoord 1, autoriteit 100%

Een keuzerondje is een native element dat specifiek is voor elk besturingssysteem/browser. Er is geen manier om de kleur/stijl te veranderen, tenzij u aangepaste afbeeldingen wilt implementeren of een aangepaste Javascript-bibliotheek wilt gebruiken die afbeeldingen bevat (bijv. dit– link in cache)

Antwoord 2, autoriteit 92%

Een snelle oplossing zou zijn om de invoerstijl van de keuzerondjes te overlappen met :after, maar het is waarschijnlijk een betere gewoonte om uw eigen aangepaste toolkit te maken.

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

Antwoord 3, autoriteit 51%

Zoals Fred al zei, is er geen manier om keuzerondjes te stylen met betrekking tot kleur, grootte, enz. Maar je kunt CSS Pseudo-elementen gebruiken om een bedrieger van een bepaald keuzerondje in te stellen en het te stylen. Wat betreft wat JamieD zei, over hoe we het :after Pseudo-element kunnen gebruiken, je kunt zowel :before als :after gebruiken om een gewenste look te krijgen.

Voordelen van deze aanpak:

  • Maak je keuzerondje vorm en voeg ook een label voor inhoud toe.
  • Verander de kleur van de buitenste rand en/of de gecontroleerde cirkel in elke gewenste kleur.
  • Geef het een transparant uiterlijk met aanpassingen aan de eigenschap achtergrondkleur en/of optioneel gebruik van de eigenschap dekking.
  • Schaal de grootte van je keuzerondje.
  • Voeg waar nodig verschillende slagschaduweigenschappen toe, zoals CSS slagschaduwinzet.
  • Breng deze eenvoudige CSS/HTML-truc in verschillende rastersystemen, zoals Bootstrap 3.3.6, zodat het visueel overeenkomt met de rest van je Bootstrap-componenten.

Uitleg van korte demo hieronder:

  • Stel een relatief in-line blok in voor elk keuzerondje
  • Verberg het oorspronkelijke gevoel voor keuzerondjes, er is geen manier om het direct te stylen.
  • Stijl en lijn het label uit
  • Css-inhoud opnieuw opbouwen op het :before Pseudo-element om 2 dingen te doen: de buitenrand van het keuzerondje stylen en het element instellen om als eerste te verschijnen (links van labelinhoud). U kunt hier de basisstappen van Pseudo-elements leren – http://www.w3schools.com/css/ css_pseudo_elements.asp
  • Als het keuzerondje is aangevinkt, vraag dan om label om de CSS-inhoud (de gestileerde stip in het keuzerondje) daarna weer te geven.

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

De 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;
}

Een korte demoom het in actie te zien

Concluderend, geen JavaScript, afbeeldingen of batterijen nodig. Pure CSS.

Antwoord 4, autoriteit 38%

Alleen als u zich richt op op webkit gebaseerde browsers (Chrome en Safari, misschien ontwikkelt u een Chrome WebApp, wie weet…), kunt u het volgende gebruiken:

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

En style het dan alsof het een eenvoudig HTML-element is, bijvoorbeeld door een achtergrondafbeelding toe te passen.

Gebruik input[type='radio']:activevoor wanneer de invoer is geselecteerd, om de alternatieve afbeeldingen te leveren

Update: vanaf 2018 kunt u het volgende toevoegen om meerdere browserleveranciers te ondersteunen:

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

Antwoord 5, autoriteit 24%

U kunt op twee pure CSS-manieren aangepaste keuzerondjes maken

  1. Door het standaard uiterlijk te verwijderen met behulp van CSS appearanceen een aangepast uiterlijk toe te passen. Helaas werkte dit niet in IE voor Desktop (maar wel in IE voor Windows Phone). Demo:

    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>

    Antwoord 6, autoriteit 12%

    je kunt de checkbox-hack gebruiken zoals uitgelegd in css-trucs

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

    werkvoorbeeld van keuzerondje:

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

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

    Werkt in IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome alles.

    Antwoord 7, autoriteit 6%

    eenvoudig voorbeeld van een aangepast keuzerondje in verschillende browsers voor u

    .checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('https://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('https://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>

    8, Autoriteit 4%

    Goed om extra elementen te maken die we kunnen gebruiken: na,: eerder (dus we hoeven niet zoveel html te veranderen). Dan voor keuzerondjes en selectievakjes die we kunnen gebruiken: gecontroleerd. Er zijn een paar andere pseudo-elementen die we ook kunnen gebruiken (zoals: hover). Met behulp van een mengsel hiervan kunnen we een aantal mooie coole aangepaste formulieren maken. Controleer dit

    9, Autoriteit 4%

    Ik heb een andere vork gebouwd @ Klewis codevoorbeeld om een ​​beetje te laten spelen met pure CSS en hellingen door te gebruiken: vóór /: Na pseudo-elementen en een verborgen radio-invoerknop.

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

    voorbeeld:
    https://www.codeply.com/p/y47T4ylfib

    Antwoord 10, autoriteit 3%

    Probeer zoiets als dit:

    <html>
<head>
<style>
#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;
}
</style>
<body>
<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>
</body>
</html>

    Antwoord 11, autoriteit 2%

    Probeer deze css met transitie:

    Demo

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

    12

    Dit is niet mogelijk door inheemse CSS. Je moet achtergrondafbeeldingen en sommige javascripttrucs gebruiken.

    13

    Zoals andere zei, is er geen manier om dit in alle browser te bereiken, dus de beste manier om zo crossbrowser te doen, gebruikt JavaScript onopvallend. In principe moet je je radiobutton in links veranderen (volledig aanpasbaar via CSS). Elk klik op de link is gebonden aan de gerelateerde RadioBox, om zijn staat en alle anderen te schakelen.

    14

    Voor degenen die liever de ontwikkeling beginnen met een minimaal voorbeeld, is hier een eenvoudig aangepast radioknop dat niet afhankelijk is van 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>

    15

    Het kan nuttig zijn om het radioknop te binden aan het gelaatsetiket. Verder details in dit antwoord .

    16

    Een slimme manier om het te doen zou zijn om een ​​afzonderlijke div te maken met een hoogte en breedte van -ver voorbeeld- 50px en vervolgens een straal van 50 px lag dit op uw radioknoppen …

    17

    U kunt een spanelement in de radio-ingang insluiten en selecteer vervolgens een kleur van uw keuze die moet worden weergegeven wanneer een radio-ingang wordt gecontroleerd. Bekijk het onderstaande voorbeeld van W3schools. 

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

    Het wijzigen van de achtergrondkleur in dit codesegment hieronder is voldoende.

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

    Afkomstig van hoe maak je een aangepast keuzerondje

    Antwoord 18

    Als je reageer bootstrap Form.checkje zou zoiets kunnen doen

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

    Antwoord 19

    Een eenvoudige oplossing zou zijn om de volgende CSS-eigenschap te gebruiken. 

    input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}
    Previous articleJavaScript-knop Onclick werkt niet
    Next articleSQL: Hoe goed te controleren of een record bestaat

    Other episodes

    Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

    html Code Expert - 0
    Ik herinner me dat ik een manier heb gezien om een ​​<input type="password" />te hebben, zodat de browser nietde gebruiker vraagt ​​om het wachtwoord...
    Read more

    VueJS/browser caching productie builds

    html Code Expert - 0
    Ik heb een VueJS-app. Telkens wanneer ik npm run builduitvoer, wordt er een nieuwe set dist/*-bestanden gemaakt, echter wanneer ik ze op de server...
    Read more

    Verhogingspijlen aanpassen bij invoer van typenummer met CSS

    html Code Expert - 0
    Ik heb een typenummer ingevoerd dat wordt weergegeven met de volgende code: <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number"> Het ziet er zo uit: Ik zou...
    Read more

    Angular 4 img src is niet gevonden

    html Code Expert - 0
    Ik heb een probleem met het vinden van een afbeelding met hoek 4. Hij blijft me vertellen dat de afbeelding niet is gevonden. Mapstructuur: app_folder/ app_component/ ...
    Read more

    HTML-tags binnen <label>

    html Code Expert - 0
    Ik heb een tabel op een pagina die bestaat uit selectievakjes in de cellen aan de linkerkant en beschrijvingen in de cellen aan de...
    Read more

    Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

    html Code Expert - 0
    Nu de CSS-rasterlay-outmodule binnenkort in Firefox en Chrome wordt geleverd, dacht ik dat ik zou proberen te begrijpen hoe ik het moet gebruiken. Ik heb...
    Read more

    Angular 2 Hash (#) van de URL verwijderen

    html Code Expert - 0
    Ik probeer het #-teken van de url in Angular 2 te verwijderen, maar ik kon geen goede uitleg vinden over hoe ik het kan...
    Read more

© Copyright - Code Expert 2021