personalizar radiobuttons
Publicado por ginosio (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
y aquí está el HTML
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
0
