Snažím sa zmeniť font-size & letter-spacing pre text priamo vedľa prepínačov. Tak to vyzerá rovnako ako písma/text, ktorý je inputted do boxov.
Snažil som sa pomocou div dať text do vlastnej triedy, to však len odošle text nižšie rádio tlačidlo. Tiež som sa snažil zmena štítku veľkosť písma, ale to znižuje všetky veľkosti textu, nie len text nachádzajúci sa vedľa ikony rádio tlačidlo.
Odkaz: 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);
}