Home > Software engineering >  Changing font size next to a radio button
Changing font size next to a radio button

Time：11-24

I am trying to change the font-size & letter-spacing for the text directly next to the radio buttons. So it looks the same as the font/text that is inputted into the boxes.

I have tried using a div to put the text into its own class, however, this only sends the text below the radio button. I have also tried changing the label font size, but this decreases all the text size, not just the text beside the radio button.

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);
}

CodePudding user response：

<div> is a block element. Works just fine with <span> for example.

CodePudding user response：

The font-size for the input boxes has been set at 15px.

You can set the font-size for the radio labels the same.

@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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Softwareengineering/203262.html

Prev:making fields editable in row in reactjs
Next:Audio mute and unmute button in html
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding