I need to change style of fieldset-CodePudding

I have radio and if female are checked I need to change border of fieldset on a different color using toogle but I don't know how to do it if I did style of fieldset in css file

html


 <html><head>
    <link rel="stylesheet" href="myFirstStyle.css" type="text/css"/>
        <fieldset id="fsStyle">
    </head>
    <body>
    <form>
<fieldset>
                     <legend>Personal information: </legend>
                     <label for="fName">First Name: </label>
                     <input type="text" name="fName" /><br>
                     
                     <label for="lName">Last Name: </label>
                     <input type="text" name="lName" /><br>
            </fieldset> 
                <fieldset>
                <legend>Sex</legend>
                <label for="sex">Male</label>
                <input type="radio" name="sex" value="male" id="male" checked><br>
                <label for="sex">Female</label>
                <input type="radio" name="sex" value="female" id="female">
            </fieldset>
            <br><input type="submit" />
    </form>
    </body>
    </html>

css

fieldset {
    border: 2px solid red;
    width: 400px;
}

legend {
    color:red;
    padding: 5px 10px;
}

input {
    background-color: #FFF3F3;
    margin: 15px;
    border: 2px solid red;
    border-radius: 7px ;
}

CodePudding user response：

You cannot do this with CSS alone, because you cannot apply a style to an ancestor element based on a state of a descendant in CSS. Until we have broader support for a :has() selector in CSS (which will come at some point in the future, for now it is supported only in Safari >= 15.4), you can only achieve your goal using Javascript.

Here's how: Use a change listener on the fieldset, and if female is checked, add a CSS class to the fieldset, otherwise remove it (using toggle):

const sex = document.getElementById('sex');
sex.addEventListener('change', (e) => {
  sex.classList.toggle('border-pink', sex.querySelector('#female:checked'));
})

.border-pink { border-color: pink; }

<fieldset id="sex">
  <legend>Sex</legend>
  <label for="sex">Male</label>
  <input type="radio" name="sex" value="male" id="male" checked><br>
  <label for="sex">Female</label>
  <input type="radio" name="sex" value="female" id="female">
</fieldset>

With :has() being available, the solution becomes alot simpler and faster (as mentioned, this currently works only in Safari >= 15.4, and can be enabled in the Chrome 101 Beta using a flag chrome://flags/#enable-experimental-web-platform-features):

fieldset:has(#female:checked) { border-color: pink; }

<fieldset id="sex">
  <legend>Sex</legend>
  <label for="sex">Male</label>
  <input type="radio" name="sex" value="male" id="male" checked><br>
  <label for="sex">Female</label>
  <input type="radio" name="sex" value="female" id="female">
</fieldset>

CodePudding user response：

You can separate the CSS style. Here is a demo of similar work. You can see this and apply it to your code.

    <div>
    <input type="radio" name=1 Value=420 id="a1">
    <label for="a1"  >Cat ($420)</label>
</div>
<div>
    <input type="radio" name=1 Value=375 id="a2">
    <label for="a2" >Dog ($375)</label>
</div>

and CSS for that code:

div { margin: .5em; }
input, label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
input[type=radio] { margin-right: -1.65em; z-index: 2; }
.radiostyle{
    background-color: #CCC;
    border-radius: 8px;
    padding: 4px 4px 4px 1.75em;
}

.radiostyle:hover{
    background-color: #0F6;    
    cursor:pointer;
}
    
input[type=radio]:checked label {
    /* Or `#a1:checked label` if you only want it for that input */
    background-color: #0F6;
}

CodePudding user response：

use can you this code for help us custom radio tag

[type="radio"]:checked,

[type="radio"]:not(:checked) {

  position: absolute;

  left: -9999px;

}

[type="radio"]:checked   label,

[type="radio"]:not(:checked)   label {

  position: relative;

  padding-left: 28px;

  cursor: pointer;

  line-height: 20px;

  display: inline-block;

  color: #666;

}

[type="radio"]:checked   label:before,

[type="radio"]:not(:checked)   label:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 18px;

  height: 18px;

  border: 1px solid #ddd;

  border-radius: 100%;

  background: #fff;

}

[type="radio"]:checked   label:after,

[type="radio"]:not(:checked)   label:after {

  content: "";

  width: 12px;

  height: 12px;

  background: red;

  position: absolute;

  top: 4px;

  left: 4px;

  border-radius: 100%;

  -webkit-transition: all 0.2s ease;

  transition: all 0.2s ease;

}

[type="radio"]:not(:checked)   label:after {

  opacity: 0;

  -webkit-transform: scale(0);

  transform: scale(0);

}

[type="radio"]:checked   label:after {

  opacity: 1;

  -webkit-transform: scale(1);

  transform: scale(1);

}

<form action="#">

  <p>

    <input type="radio" id="test1" name="radio-group" checked>

    <label for="test1">One</label>

  </p>

  <p>

    <input type="radio" id="test2" name="radio-group">

    <label for="test2">Two</label>

  </p>

  <p>

    <input type="radio" id="test3" name="radio-group">

    <label for="test3">three</label>

  </p>

</form>