更改单选按钮旁边的字体大小

Posted 2023-03-06

技术标签:

【中文标题】更改单选按钮旁边的字体大小【英文标题】：Changing font size next to a radio button 【发布时间】：2022-01-02 13:46:56 【问题描述】：

我正在尝试直接更改单选按钮旁边的文本的字体大小和字母间距。所以它看起来与输入到框中的字体/文本相同。

我尝试使用 div 将文本放入其自己的类中，但是，这只会发送单选按钮下方的文本。我也尝试过更改标签字体大小，但这会减小所有文本大小，而不仅仅是单选按钮旁边的文本。

链接：https://codepen.io/Tantlu/full/JjyQYZw

<body>
  <div class="video-bg">
 <video   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);

【问题讨论】：

【参考方案1】：

<div> 是一个块元素。例如，与 <span> 一起工作就好了。

【讨论】：

谢谢！哈哈哈我完全忘记了 【参考方案2】：

输入框的字体大小已设置为 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   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>

【讨论】：

以上是关于更改单选按钮旁边的字体大小的主要内容，如果未能解决你的问题，请参考以下文章

更改字体大小而不弄乱 Tkinter 按钮大小

无法更改 HTML 表单提交按钮的字体大小

如何更改 Matplotlib 中颜色条刻度标签的字体大小？

在 Extjs 4 中更改按钮字体大小

如何更改导航栏中按钮文本的字体大小？

更改 Shell 类的后退按钮的覆盖文本的字体大小（以及，如果可能，其他字体格式属性）