Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CHAT APP CSS ILLUSTRATION MASTER

WD 200

@WDSYX

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Quite a tricky one for me. I need help with styling the radio input in the html. Couldn't make the exact style shown in sample. I could do with any help.

Community feedback

S MD suleman 3,530

@sulemaan7070

Posted

hey @WDSYX😄, great job!! you made a neat site..

here is what you asked, the custom input radio button make sure you play around with it

For the custom radio-button you can do something like this to acheive that

.negotiate input[type="radio"] {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--Dark-Grayish-Violet);
  border-radius: 50%;
  outline: none;
  box-shadow: 0 0 5px 0px gray inset;
}
.negotiate input[type="radio"]:checked {
  background: var(--White);
}

let me know if you need further help, happy coding✅😄💯

0

WD 200

@WDSYX

Posted

@sulemaan7070 thanks so much man it worked... Happened that I didn't add the -webkit. I guess I didn't know, I had like to know more about the WebKit property and when to use them.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord