更改单选按钮旁边的字体大小
Changing font size next to a radio button
我正在尝试更改单选按钮旁边文本的字体大小和字母间距。所以它看起来与输入框中的 font/text 相同。
我试过使用 div 将文本放入它自己的 class 中，但是，这只会发送单选按钮下方的文本。我也尝试过更改标签字体大小，但这会减小所有文本的大小，而不仅仅是单选按钮旁边的文本。
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);
}
<div> 是块元素。例如，与 <span> 一起工作得很好。
输入框的字体大小已设置为 15px。
您可以将单选标签的字体大小设置为相同。
@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;
/* ADDED */
font-size: 15px;
letter-spacing: 0.1px;
}
.rad-label:hover,
.rad-label:focus-within {
background: hsla(0, 0%, 80%, .14);
}
<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>
我正在尝试更改单选按钮旁边文本的字体大小和字母间距。所以它看起来与输入框中的 font/text 相同。
我试过使用 div 将文本放入它自己的 class 中，但是，这只会发送单选按钮下方的文本。我也尝试过更改标签字体大小，但这会减小所有文本的大小，而不仅仅是单选按钮旁边的文本。
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);
}
<div> 是块元素。例如，与 <span> 一起工作得很好。
输入框的字体大小已设置为 15px。
您可以将单选标签的字体大小设置为相同。
@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;
/* ADDED */
font-size: 15px;
letter-spacing: 0.1px;
}
.rad-label:hover,
.rad-label:focus-within {
background: hsla(0, 0%, 80%, .14);
}
<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>