Chat-app-css-illustration-master using html and CSS

Community feedback

• 

  Kevin Ebenhezer•430

  @kevinebenhezerPosted 8 months ago

  Hi @cristianccgg Your solution looks amazing!

  I could give you some advice regarding your concern about making the radio button background color transparent, if you don't mind.

  1. Replace <p> tag with <label> and put it below the <input type='radio'>

  2. Put the value into the label, like :

  <label for="30min">30 minute walk</label>

  3. Style the <input type='radio'> to display = none

  4. You can use pseudo-element on label like this, label::before

  5. Next, style your label::before like:

    content: "";
    position: relative;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border: 1px solid hsl(289, 100%, 72%);;
    border-radius: 50%;
    margin-right: 0.5rem; 
  }
  

  6. And then you can style the input type radio and the label::before like this:

  input[type="radio"]:checked + label::before {
  	background-color: white;
  }
  

  Basically, we just create a new custom radio button. But still functioning like the original one. Because, as i know, we can't really style the original radio button. Might as well create a new customize-able one. So we can style it as we want. Because pseudo-element is great use on a case like this.

  This method works great on me!

  I hope this would help you with your problems. Good luck and happy coding!

  Marked as helpful

  0

  ---

  

  Christian G•920

  @cristianccggPosted 8 months ago

  Hi @kevinebenhezer.

  Thank you so much for taking the time to explain it. It worked although honestly, I am still trying to understand more about those pseudo elements. Thanks again.

  0