scss Bootstrap Pure CSS自定义单选按钮/复选框

Posted 2021-05-18

.radio {
	//width: 33.33%; 
	//float: left;

	[type="checkbox"]{

		//Base for label styling

		&:not(:checked),
		&:checked {
		  position: absolute;
		  left: -9999px;
		}

		&:not(:checked) + label,
		&:checked + label {
		  position: relative;
		  padding-left: 25px;
		  cursor: pointer;
		}

		//Checkbox aspect

		&:not(:checked) + label:before,
		&:checked + label:before {
		  content: '';
		  position: absolute;
		  left:0; top: 2px;
		  width: 17px; height: 17px;
		  border: 1px solid #aaa;
		  background: #f8f8f8;
		  border-radius: 3px;
		  box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
		}

		// Checked mark aspect

		&:not(:checked) + label:after,
		&:checked + label:after {
		  content: '✔';
		  position: absolute;
		  top: 3px; left: 4px;
		  font-size: 18px;
		  line-height: 0.8;
		  color: #09ad7e;
		  transition: all .2s;
		}

		// Checked mark aspect changes

		&:not(:checked) + label:after {
		  opacity: 0;
		  transform: scale(0);
		}
		&:checked + label:after {
		  opacity: 1;
		  transform: scale(1);
		}

		// disabled checkbox

		&:disabled:not(:checked) + label:before,
		&:disabled:checked + label:before {
		  box-shadow: none;
		  border-color: #bbb;
		  background-color: #ddd;
		}
		&:disabled:checked + label:after {
		  color: #999;
		}
		&:disabled + label {
		  color: #aaa;
		}

		// accessibility

		&:checked:focus + label:before,
		&:not(:checked):focus + label:before {
		  border: 1px dotted blue;
		}

	}

	// hover style just for information

	label:hover:before {
	  border: 1px solid #4778d9!important;
	}

}

Based on: http://codepen.io/CreativeJuiz/pen/BiHzp
More info: https://css-tricks.com/snippets/css/custom-radio-buttons/

<div class="form-group radios clear">
	<div class="radio">	  
		<input type="checkbox" checked="checked" class="categories" name="categories" id="itech-wording" value="iTech wording"> 
		<label for="itech-wording">iTech wording</label>
	</div>

	<div class="radio"> 
		<input type="checkbox" class="categories" name="categories" id="vero-prepress" value="Vero Pre-press">
		<label for="vero-prepress">Vero Pre-press</label>
	</div>
</div>

/*


OJO REVISAR A VER QUE CREO QUE EL CIRCULITO AL PINCHAR NO VA
AL MENOS EN VERO NO IBA

basado en http://codepen.io/mitchmc/pen/pebIx

<div class="form-group radios clear">
	<div class="radio">	  
		<input type="checkbox" checked="checked" class="categories" name="categories" id="itech-wording" value="iTech wording"> 
		<label for="itech-wording">iTech wording</label>
	</div>

	<div class="radio"> 
		<input type="checkbox" class="categories" name="categories" id="vero-prepress" value="Vero Pre-press">
		<label for="vero-prepress">Vero Pre-press</label>
	</div>
</div>

*/

.radio {
	width: 33.33%; 
	float: left;

	input[type="checkbox"] {
	  display:none;
	}
	input[type="checkbox"] + label {
	  //color: white;
	  //font info
	}
	input[type="checkbox"] + label span {
	  display:inline-block;
	  position: relative;
	  width: 20px;
	  height: 20px;
	  border-radius: 50%;
	  background-color: white;
	  vertical-align:middle;
	  cursor:pointer;
	  margin:-1px 4px 0 0;
	  backface-visibility: hidden;
	  &:before {
	  	content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 5;
			width: 20px;
	  	height: 20px;
			border-radius: 50%;
	  	background-color: black;
	  	transform: scale(0);
			transition: transform 0.2s ease;
	  }
	}

	input[type="checkbox"]:checked + label span{
	  //background-color: black;
	  &:before {
	  	transform: scale(1);
	  }
	}

	
	//input[type="checkbox"] + label span,
	//input[type="checkbox"]:checked + label span {
	//  transition:background-color 0.4s linear;
	//}
	
}

/*


* * * * * * * * * * *

OJO!!!! EN IPAD NO VA AL ESTAR ENGLOBADO EL INPUT DENTRO DEL LABEL

OJO QUE YO LO MODIFIQUÉ PARA LA ESTRUCTURA DE BOOTSTRAP PERO EN IPAD ASI NO VA, VER LA OTRA VERSIO

MODIFICAR EL MARCADO PARA QUE FUNCIONE COMO EN
http://codepen.io/mitchmc/pen/pebIx

* * * * * * * * * * *


<form class="my-contact-form">

<div class="form-group col-sm-6">

  <label class="radio-inline">
    <input type="radio" name="contact-supply-type" id="suministro-unico" value="option1" checked> <span><i></i> Suministro único</span>
  </label>

  <label class="radio-inline">
    <input type="radio" name="contact-supply-type" id="multi-suministro" value="option2"> <span><i></i> Multisuministro</span>
  </label>
  
</div>   

</form> 
    
*/



.my-contact-form {

  .radio-inline {
    padding: 0.6rem 0 0 0;
  }

  input[type="radio"] {
    display:none;
  }

  input[type="radio"] + span {
    //input text
  }

  input[type="radio"] + span > i {
    display:inline-block;
    position: relative;
    
    width:20px;
    height:20px;
    
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    
    border-radius: 50%;
    border: 1px solid $optmz-cyan;
    background-color: white;

    &:after {
      content: "";
      display: block;
      opacity: 0;
      width:12px;
      height:12px;
      border-radius: 50%;
      background-color: $optmz-cyan;

      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 5;

      transition: opacity 0.2s ease;
    }
  }

  input[type="radio"]:checked + span > i{
    &:after {
      opacity: 1;
    }

  }
}