Estoy tratando de cambiar el font-size & letter-spacing para el texto directamente al lado de los botones de radio. Por lo que se ve de la misma como la fuente de texto que se introducen en las cajas.
He intentado usar un div para poner el texto en su propia clase, sin embargo, esto sólo se envía el texto debajo del botón de radio. También he intentado cambiar el tamaño de fuente de la etiqueta, pero esto disminuye todo el tamaño del texto, no sólo el texto al lado del botón de radio.
Enlace: https://codepen.io/Tantlu/full/JjyQYZw
HTML:
<body>
<div class="video-bg">
<video width="320" height="240" autoplay loop muted>
<source src="https://assets.codepen.io/3364143/7btrrd.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<h1>Design Survey.</h1>
<form class="form">
<div class="form-control">
<label for="name" class="label-name">
Name
</label>
<input type= "text" id= "name" placeholder= ""/>
</div>
<div class="form-control">
<label for="email" class="label-email">
Email
</label>
<input type="email" id= "email" placeholder= "" />
</div>
<div class="form-control">
<label for="age" class="label-age">
Age
</label>
<input type= "number" id= "age" placeholder= ""/>
</div>
<div class="form-control">
<label for="edu" id="label-edu">
What is your education level?
</label>
<div class="options">
<select name="edu" id="dropdown">
<option hidden></option>
<option value="high-school">High School</option>
<option value="cert-4">Certificate IV</option>
<option value="diploma">Diploma</option>
<option value="b-degree">Bachelors Degree</option>
<option value="m-degree">Masters Degree</option>
</select>
</div>
</div>
<div class="form-control">
<label>Do you like this design?</label>
<!-- Radio Buttons -->
<label for="rad1" class="rad-label">
<input type="radio" id="rad1" name="radio" class="rad-input"> Yes</input>
<div class="rad-design"></div>
</label>
<label for="rad2" class="rad-label">
<input type="radio" id="rad2" name="radio" class="rad-input"> No</input>
<div class="rad-design"></div>
</label>
<label for="rad3" class="rad-label">
<input type="radio" id="rad3" name="radio" class="rad-input"> Maybe</input>
<div class="rad-design"></div>
</label>
</div>
</form>
</body>
CSS:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
body {
font-family: 'Poppins', sans-serif;
color: #fff;
}
.video-bg {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
h1 {
position: relative;
font-family: 'Poppins', sans-serif;
color: #fff;
text-align: center;
top: 0;
font-size: 45px;
}
.form {
max-width: 700px;
margin: 50px auto;
background-color: rgba(16 18 27 / 30%);
border-radius: 14px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 30px 30px;
}
.form-control {
text-align: left;
margin-bottom: 25px;
font-size: 1.1rem;
letter-spacing: 0.4px;
font-weight: 500;
}
.form-control label {
display: block;
margin-bottom: 15px;
}
.form-control input,
.form-control select,
.form-control textarea {
background: rgba(16 18 27 / 35%);
width: 97%;
border: none;
border-radius: 4px;
padding: 10px;
display: block;
font-family: inherit;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.1px;
color: #fff;
outline: none;
box-shadow: 0 0 0 2px rgb(134 140 160 / 8%);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
select {
width: 100% !important;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
z-index: 10;
position: relative;
background: transparent;
}
.options {
position: relative;
margin-bottom: 25px;
}
.options::after {
content: ">";
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
top: 6px;
right: 15px;
position: absolute;
z-index: 0;
}
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
font-size: 10px;
}
.rad-label {
border-radius: 100px;
padding: 10px 10px;
cursor: pointer;
transition: .3s;
}
.rad-label:hover,
.rad-label:focus-within {
background: hsla(0, 0%, 80%, .14);
}