CSS - personalizar radiobuttons

   
Vista:

personalizar radiobuttons

Publicado por ginosio mmario.alvarezz.gin@gmail.com (1 intervención) el 04/04/2016 19:48:35
Hola buena tarde
Me presento como un programador apasionado que está comenzando con pocos conocimientos pero que disfruta de aprender a diario, trato de buscar las respuestas antes de preguntarlas, pero en este caso, no encuentro la manera de hacerlo.


Alguien sabe cómo puedo modificar unos radiobuttons?

Tengo un slider muy bonito que me compilé y pero no trae radiobuttons para pasar a la siguiente lamina/parte/diapositiva (como gusten decirle), por lo que el explorador los coloca por default y ya saben, todos los exploradores le colocan el clásico botón del azul en el circulo blanco.

A mí lo que me gustaría es cambiar el circulo por un simple circulo del color que sea, pero que no sea ese botón.
¿Alguien me puede ayudar porfavor?



El código de mi slider es este:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
.slider {
  height: 500px;
  position: relative;
  overflow: visible;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
 
 
.slider__nav {
  width: 40px;
  height: 40px;
  padding: 0px auto;
  z-index: 10;
  outline: 0px solid #c1d72e;
  outline-offset: 6px;
  outline-color: #c1d72e;
  cursor: pointer;
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
 
.slider__nav:checked {
  -webkit-animation: check 0.8s linear forwards;
  animation: check 0.8s linear forwards;
}
 
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
 
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  -webkit-transform: translateX(-25%);
  transform: translateX(-25%);
}
 
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
 
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  -webkit-transform: translateX(-75%);
  transform: translateX(-75%);
}
 
.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
 
.slider__contents {
  height: 100%;
  padding: 10px;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
 
.slider__image { font-size: 2.7rem; }
 
.slider__caption {
  font-weight: 700;
  margin: 2rem 0 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}
 
.slider__txt {
  color: #fff;
  margin: 0 auto;
  max-width: 1200px;
  font-size: 20px;
}


y aquí está el HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="slider">
 
    <input type="radio" name="slider" class="slider__nav" title="Nosotros" checked="checked"/>
      <input type="radio" name="slider" class="slider__nav" title="Misión"/>
      <input type="radio" name="slider" class="slider__nav" title="Visión"/>
      <input type="radio" name="slider" class="slider__nav" title="Valores"/>
 
 
  <div class="slider__inner">
 
    <div class="slider__contents"><img src="imagotipoGIN.png" alt="imagotipo" width="100" height="100">
      <h2 class="slider__caption">NOSOTROS</h2>
      <p class="slider__txt">Aqui va nosotros</p>
    </div>
    <div class="slider__contents"><img src="imagotipoGIN.png" alt="imagotipo" width="100" height="100">
      <h2 class="slider__caption">MISIÓN</h2>
      <p class="slider__txt">Aquí va Misión</p>
    </div>
    <div class="slider__contents"><img src="imagotipoGIN.png" alt="imagotipo" width="100" height="100">
      <h2 class="slider__caption">VISIÓN</h2>
      <p class="slider__txt">Aquí va Visión</p>
    </div>
    <div class="slider__contents"><img src="imagotipoGIN.png" alt="imagotipo" width="100" height="100">
      <h2 class="slider__caption">VALORES</h2>
      <p class="slider__txt">Valores<br>Valores<br>Valores<br>Valores<br>Valores<br></p>
    </div>
  </div>
</div>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema

personalizar radiobuttons

Publicado por txema (4 intervenciones) el 05/04/2016 16:43:52
Hola ginosio:

Una forma que la considero sencilla (no necesariamente la mejor) es ocultar los "radio" y generar un <span> para darle los estilos, incluyendo diseños de imagen si el CSS nos complica.

Sería algo así:
HTML
En cada línea de type="radio" genero un ID, su label y su span
1
2
3
4
5
6
7
8
<input type="radio" name="slider" id="Nosotros" class="slider__nav" title="Nosotros" checked="checked">
<label for="Nosotros"><span></span></label>
<input type="radio" name="slider" id="Mision" class="slider__nav" title="Misión">
<label for="Mision"><span></span></label>
<input type="radio" name="slider" id="Vision" class="slider__nav" title="Visión">
<label for="Vision"><span></span></label>
<input type="radio" name="slider" id="Valores" class="slider__nav" title="Valores">
<label for="Valores"><span></span></label>

Y después en CSS oculto el botón para generar mi estilo en el <span>
(sin detenerme en los estilos de clase que tendrías que anularlos/corregirlos, pero creo que lo entenderás)
1
2
3
4
5
6
7
8
9
input[type="radio"]{ display: none; }
input[type="radio"] + label span{
  display: inline-block;
  // tu nuevo diseño 
  cursor:pointer;
}
input[type="radio"]:checked + label span{
  // tu nuevo diseño 
}

Nos comentas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Juan Eduardo Perez Hernandez

personalizar radiobuttons

Publicado por Juan Eduardo Perez Hernandez jeph13c@gmail.com (3 intervenciones) el 20/05/2016 22:15:07
Este es un css basico para cambiar su apariencia:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
input[type="radio"], input[type="checkbox"] {
    display: none;
}
label:before {
font-family: 'FontAwesome';
width: 1.25em;
display: inline-block;
}
input[type="radio"] + label:before  {
content: "f10c"; /* circle-blank */
}
input[type="radio"]:checked + label:before {
content: "f111"; /* circle */
}
input[type="checkbox"] + label:before {
content: "f096"; /* check-empty */
}
input[type="checkbox"]:checked + label:before {
content: "f046"; /* check */
}
puedes checar mas estilos en :
https://oscargascon.es/cambiar-la-apariencia-de-los-radiobutton-y-checkbox-de-los-formularios-html-por-medio-de-css-sprites-y-fontawesome/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar