Eu sunt încercarea de a schimba font-size & letter-spacing pentru text direct de lângă butoane radio. Deci se pare la fel ca font/text care sunt introduse in cutii.
Am încercat, folosind o div pentru a pune textul în propria sa clasă, cu toate acestea, acest lucru trimite doar textul de mai jos butonul radio. Am încercat, de asemenea, modificarea etichetei dimensiunea fontului, dar aceasta scade tot dimensiunea textului, nu doar textul de lângă butonul radio.
Link: 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);
}