Necesitamos tu apoyo para compartir nuestras secciones en referencia a las ciencias informáticas.

Solución:

Esto se puede hacer fácilmente con solo CSS, sin necesidad de JS. El concepto básico es diseñar un elemento que es hermano de la entrada, creando un botón de opción “falso”:

/* 
 * Hide the inputs. 
 */

input 
  display: none;



/*
 * Then, style the label so it looks like however you want.
 * Here's a quick rundown of how I did it here:
 */


/*
 * Some basic positioning styles, and we give it the pointer cursor to show 
 * that it's clickable
 */

label 
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;



/*
 * With how I decided to build this, the position: relative is super important.
 * We're going to position a pseudo element within this element(As it is the containing box)
 */

label span 
  position: relative;
  line-height: 22px;



/* 
 * Because we're using pseudo elements, a content property is required to make them appear.
 */

label span:before,
label span:after 
  content: '';



/*
 * We are using the :before peudo elemnt as the actual button,
 * then we'll position the :after over it. You could also use a background-image,
 * font-icon, or really anything if you want different styles.
 * For the specific style we're going for, this approach is simply the easiest, but
 * once you understand the concept you can really do it however you like.
 */

label span:before 
  border: 1px solid #222021;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;


label span:after 
  background: #222021;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 4px;
  transition: 300ms;
  opacity: 0;


/*
 * This is the most important part of this whole file, if you understand what's happening here
 * you can really make this in so many different ways.
 * 
 * We start by selecting the input inside of the label, with "label input". From there we use the 
 * ":checked" selector to *only* select the input when it is checked. We then use the immediate sibling 
 * selector(+) to select the span, and then it's pseudo element :after(What we are using to mark the button)
 * Because we already styled the :after, all we have to do is set the opacity to 1, making it fade in.
 */
label input:checked+span:after 
  opacity: 1;



/* 
 * A little styling for the demo 
 */

body 
  background: #fbfbfb;
  font-family: Arial;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.7);

  
  EMAIL



  
  PHONE

Consulte los comentarios del código para obtener una explicación más detallada, pero esto es lo básico:

---

Comience por crear un como envoltorio. Usamos una etiqueta porque los eventos activados en ella también se activarán en la entrada asociada:

Añádele una entrada:

Recuerde que los botones de radio deben tener el mismo nombre para ser agrupados. Ahora tiramos un después de la entrada, por lo que tenemos algo a lo que apuntar en nuestro CSS.

Y el HTML está listo. Consulte el CSS para ver la explicación allí, será más fácil de entender.

Esta es la más simple que conozco, una solución CSS pura que no requiere etiquetas ni secuencias de comandos. Se requieren un par de prefijos de proveedores para una compatibilidad total:

input[type='radio'] 
  box-sizing: border-box;
  appearance: none;
  background: white;
  outline: 2px solid #333;
  border: 3px solid white;
  width: 16px;
  height: 16px;


input[type='radio']:checked 
  background: #333;

Como se señaló anteriormente, el box-sizing y appearance las propiedades deben tener el prefijo del proveedor:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

No es necesario diseñar un botón de radio. Solo usa un div:

Ejemplo en un violín: http://jsfiddle.net/kLGf4/2/

html:

 

    

         
Perfered Method of Contact

    
    
 Choice 1

        

             

        
    
    
 Choice 2

        

            

        
    

CSS:

.square-radio 
    border: 1px solid black;
    margin: 2px;
    width: 40px;
    height: 40px;
    position: relative;


.square-radio--clicked .square-radio--content
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: black;
    width: 20px;
    height: 20px;

js:

$(document).ready(function () 
    $(document).on("click", ".square-radio", function () 
        $(this).toggleClass("square-radio--clicked");
    );
);

Sección de Reseñas y Valoraciones

Si estás de acuerdo, tienes la opción de dejar una división acerca de qué le añadirías a este enunciado.

---

---

Utiliza Nuestro Buscador