LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Topcoat Radio Buttons

Iterating on a simple, portable, and accessible css only solution for styling radio buttons.





*for fun tab to focus and use spacebar to check

To ensure that assistive technology knows the location of the radio button, we don't use

  input[type=radio] {
    position: absolute; 
    top: -9999px; 
    left: -9999px;
  }
to hide the checkbox offscreen. Instead we use the following, inspired by jQuery UI's .ui-helper-hidden-accessible class, to hide the radio button but retain its dimensions and position in the document.
    input[type=radio] {
      border: 0;
      clip: rect(0 0 0 0);
      height: 2rem;
      margin: 0 -2rem -2rem 0;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 2rem;
      opacity: 0.001;
    }

CSS
body {
  padding: 0 50px;
  background-color: #f4f4f4;
  font-family: source-sans-pro, sans-serif;
}

input[type=radio] {
  border: 0;
	clip: rect(0 0 0 0);
	height: 2rem;
	margin: 0 -2rem -2rem 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 2rem;
  opacity: 0.001;
}

.title {
  letter-spacing: -.065em
}

.topcoat-radio-button__label {
  display: inline-block;
  line-height: 2rem;
  
  -webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.topcoat-radio-button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 2rem;
  height: 2rem;
  
  -webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Background */
.topcoat-radio-button:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
	width: 2rem;
	height: 2rem;
  background: #e5e9e9;
	border: 1px solid #a5a8a8;
	border-radius: 100%;
  cursor: pointer;
  
	-webkit-box-shadow: inset 0 1px #fff;
	box-shadow: inset 0 1px #fff;
}

/* Checkmark */
.topcoat-radio-button:after {
  opacity: 0;
	content: '';
	position: absolute;
  width: 1rem;
  height: 1rem;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  background: #666666;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 100%;
  cursor: pointer;
  box-shadow: 0 1px rgba(255,255,255,0.50);
}

input[type=radio]:checked + .topcoat-radio-button:after {
	opacity: 1;
}

:focus + .topcoat-radio-button:before {
  border: 1px solid #0940fd;
  -webkit-box-shadow: 0 0 0 2px #6fb5f1;
  box-shadow: 0 0 0 2px #6fb5f1;
}
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:00

Related Codes

Pen ID
Pen ID
Pen ID