CODEWITHSUNDEEP
htmlcss
fdfdfd
fdfdfd

Reputation: 501

Is it possible to only enable select input after checking radio button WITH only html or css?

As the title stated above, I'm just wondering if it is possible to enable a select tag only after checking radio button using only HTML and CSS?

For example: after selecting the radio button, then i will be able to access and click on the select box. select + radio button

Upvotes: 0

Views: 138

Answers (3)

Thanveer Shah
Thanveer Shah

Reputation: 3333

Second Solution

As disabling is not possible without JavaScript, You can use this small trick that will act as a disabled property: pointer-events: none;

Even tho I don't recommend this, But it's still a good hack

HTML

<input type="radio" name="1" id="radio">
    <select name="" id="select">
    <option value="">Select</option>
  </select>

CSS

   #select{
      pointer-events: none;
    }
    #radio:checked ~ #select{
      pointer-events: all;
    }

Upvotes: 1

Erfan Mola
Erfan Mola

Reputation: 121

With Pure CSS or HTML its not possible, you could only be able to set your select's display to none and show it when radio button gets focus , otherwhise you have to do it with JS, Also to prevent showing by mistake by hovering to other radio buttons, you have to assign a unique ID to the radio button and select.

Upvotes: 1

Thanveer Shah
Thanveer Shah

Reputation: 3333

You cannot disable without Javascript , But you sure can Hide/Show it using HTML, CSS.

Here is the sample :

HTML

 <input type="radio" name="1" id="radio">
    <select name="" id="select">
    <option value="">Select</option>
  </select>

CSS

#select{
      display: none;
    }
    #radio:checked ~ #select{
      display: inline;
    }

Upvotes: 1

Related Questions