Ascundeți butonul radio de verificare cu css (Programare, Css, Buton Radio)

bertassa a intrebat.

Aș dori să știu dacă este posibil să ascund butonul radio bifat cu css folosind:

  { display:none; }

Nu știu cum să mă adresez acestui element. Butonul radio bifat afișează mereu „none” ceea ce nu înseamnă nimic pentru utilizator și doresc să îl ascund.este posibil acest lucru?mulțumesc pentru orice indicație.

Comentarii

  • ce este în neregulă cu input[type=”radio”]:checked{display:none;} ?? Ar trebui să o ascundă în acest fel. Nu știu de ce ați vrea să o ascundeți totuși –  > Por Danield.
7 răspunsuri
Joe H

Doar un mic sfat:

Dacă vrei să folosești în continuare tot suportul nativ al browserului pentru radiouri și casete de selectare, cum ar fi mutarea între ele cu tastele ↑ și ↓, setează css-ul la:

position: fixed;
opacity: 0;
pointer-events: none;

Acest lucru va păstra toate funcționalitățile, dar va păstra intrarea ascunsă și nu va ocupa spațiu de layout.
Mi-am petrecut ultimele 3 ore încercând să înțeleg acest lucru, dar funcționează!

Comentarii

  • Acesta este cel mai bun răspuns, deoarece nu afectează utilizatorii de accesibilitate, sau navigarea prin tastatură. –  > Por Arjun.
  • M-am gândit că următoarele fiddle ar putea fi un exemplu util în legătură cu acest răspuns –  > Por Dave F.
  • Acest lucru nu funcționează cu adevărat, din păcate. Cu Up/Down există o „capcană” în FF & IE în care dispare focalizarea, iar ciclul este întrerupt. A se vedea: stackoverflow.com/questions/54293720/… –  > Por gene b..
  • Experiența mea: position: fixed a cauzat o scurtă lipsă de responsabilitate și salturi ciudate de aspect pe Chrome pentru Android. position: absolute și width: 0 pare să funcționeze mai bine (trebuie să atribuiți position: relative la intrări părinte, evident). –  > Por HynekS.
  • Vă mulțumim! Am încercat atât de multe lucruri, am găsit în sfârșit acest răspuns și a funcționat ca prin minune! Am încercat asta cu FF, Chrome și Opera și a funcționat cu toate. –  > Por Jay Patel.
lijn

Suplimentar la răspunsul lui Nathan Lee

input[type="radio"]:checked{
    visibility:hidden;
}

este o opțiune pentru a specifica un buton radio bifat

input[type="radio"][value="text"]:checked{
    visibility:hidden;
}

este o opțiune pentru a specifica un buton radio bifat cu o valoare care este egală cu „text” („none” în exemplul dvs.)

mai multe informații: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

dacă valoarea nu este cunoscută, un pic de jQuery poate face treaba: http://api.jquery.com/attribute-equals-selector/

Comentarii

  • Mulțumesc, este exact ceea ce aveam nevoie, însă am observat o altă problemă, pe care nu am luat-o în considerare. Vă rog să aruncați o privire pe această pagină (marsden.webresponsive.co.uk/index.php/digi-di-162ss.html). Vreau să ascund doar butonul bifat în cazul în care textul este „None”, altfel, când bifez celelalte opțiuni, celelalte butoane radio sunt ascunse și nu vreau acest lucru. Cum pot să fac acest lucru? –  > Por bertassa.
  • @user1977156 Vrei să spui dacă valoarea este none? => input[type="radio"][value="text"]:checked Nu sunt sigur unde să văd un buton radio la pagina dvs., nu pare să existe unul în codul sursă.. – -.  > Por lijn.
  • Îmi pare rău că poate nu a fost clar. Vreau să spun că prima intrare radio în mod implicit este întotdeauna bifată, iar textul este întotdeauna egal cu „None”. Vreau să ascund doar acea intrare radio al cărei text este egal cu „None”. –  > Por bertassa.
  • Deci, puteți utiliza input[value="none"] ? Mai multe informații: Selector CSS: [attr=value] developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors | Îmi pare rău, dar nu înțeleg: „text” este valoarea sau eticheta, care este relația dintre „text” și butonul radio? –  > Por lijn.
  • Am încercat din nou. Am nevoie să ascund intrarea radio bifată, precum și textul, doar atunci când conținutul este egal cu „None”, ca în exemplul de pe pagină. link. Cu acest input[type="radio"]:checked Ascund orice buton radio bifat, dar vreau să ascund doar cel bifat pe atunci când textul este egal cu „None” –  > Por bertassa.
Gerben Versluis

Dacă doriți să ascundeți un checkbox/radio de mai multe ori este să faceți un checkbox/radio personalizat.

Dacă doriți să vă puteți concentra asupra etichetei pentru intrare folosiți opacity: 0; position:absolute; width:0; care face ca intrarea să fie invizibilă fără a ocupa spațiu.

Dacă folosiți display:none; sau visibility:hidden; va avea un efect similar, dar cele mai utilizate browsere actuale (MSIE11, Edge, Chrome 60.0.3112.101, Firefox 55) nu vor permite focalizarea elementului cu ajutorul tastaturii, ceea ce îl face mai puțin accesibil.

Demonstrație: https://jsfiddle.net/Lmt4zrvn/

Nitesh

Încercați visibility:hidden; Acest lucru va funcționa.

Aici este DEMO DE LUCRU

HTML:

<input class="checked" type="radio" checked />

CSS:

input.checked[type="radio"]{visibility:hidden;}

Sper că este ceea ce căutați.

Comentarii

  • Aceasta nu este cea mai bună abordare dacă luați în considerare navigarea prin tastatură și accesibilitatea. Răspunsul lui Gerben Versluis mi s-a părut foarte corect. –  > Por M Mansour.
Arbaoui Mehdi

Încercați să utilizați :checked selector:

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

Demo: http://jsfiddle.net/RkzG5/

Damian Green

Dacă ați folosit {display:none;} și încă vedeți un spațiu (cam 3px sau cam așa ceva), atunci este posibil să aveți spații sau linii noi între elementele din html, ceea ce poate determina uneori ca randarea să afișeze niște pixeli între aceste elemente.

Acest lucru este într-adevăr problematic și poate fi foarte dificil de identificat ca fiind problema fără aceste cunoștințe, dar odată ce știți, aveți două soluții ușoare:

  1. Fie, eliminați spațiul alb dintre etichete în html. (Din păcate, acest lucru face ca html-ul să fie mai dezordonat, așa că a doua opțiune ar putea fi mai bună).

  2. Sau, în css, setați font-size în containerul părinte la 0px. ex: #parent{font-size:0px;} și apoi inițializați-o din nou pentru toți copiii părintelui cu #parent *{font-size:initial;}.

Skippy le Grand Gourou

În plus față de problemele menționate în alte răspunsuri (în special problema accesibilității), o avertizare pentru display: none este că va afecta, de asemenea, avertismentul afișat de browser atunci când intrarea radio este required și utilizatorul nu a bifat-o.

Pe de altă parte, un avertisment pentru opacity: 0 și pentru visibility: hidden este că acesta butonul radio va folosi în continuare ceva spațiu (și AFAICS width: 0px nu are niciun efect), ceea ce poate fi o problemă (de exemplu, pentru aliniere, sau dacă butoanele radio sunt în interiorul <li> și vreți ca spațiul <li> culoarea de fundal să se schimbe la :hover, , caz în care eticheta trebuie să acopere <li>).

O soluție este de a seta pur și simplu valoarea position a butonului radio ca fiind fixed :

După cum se vede în fragment (folosind opacity: 10 în loc de 0 doar pentru a vedea despre ce este vorba), cu position: fixed butonul radio nu mai afectează eticheta.

Comentarii

  • La naiba, m-am gândit că exact despre asta era deja răspunsul cel mai votat… >< Oricum nu-l șterg, pentru că mi-ar fi fost mai util prezentat așa. –  > Por Skippy le Grand Gourou.