What is the best way to align checkboxes perfectly alongside the rest of the text within the text box?

I need the checkbox to be positioned under the text boxes in a aligned manner.

Even though I used the CSS code below to align the text boxes, the checkboxes are not properly aligned:

   label {
    width:135px;
    clear:left;
    text-align:right;
    padding-right:10px;
   }

   input, label {
    float:left;
   }


   <label><input type="checkbox" name="Yes" data-field- 
   type="Boolean">&nbsp;Will Attend</label>



<label for="Email Address">Email Address* </label><input type="text" name="Email Address" data-field-type="Text" required="required" data-validation-message="Required field.">

<label for="First Name">First Name</label> <input type="text" name="First Name" data-field-type="Text">

<label for="Last Name">Last Name</label>  <input type="text" name="Last Name" data-field-type="Text">

I am looking to have the checkbox aligned perfectly with the Textboxes.

https://i.sstatic.net/LcTBL.png

Answer №1

Make sure to remove your input[type=checkbox] from inside the <label>, just like the other inputs, in order for it to function properly.

Alternatively, for a choice between yes or no, it might be better to use a radio button instead.

label {
  width: 135px;
  clear: left;
  text-align: right;
  padding-right: 10px;
}

input,
label {
  float: left;
}
<label for="Email Address">Email Address* </label>
<input type="text" name="Email Address" data-field-type="Text" required="required" data-validation-message="Required field.">
<label>Will Attend</label>
<input type="checkbox" name="Yes" data-field-type="Boolean">
<label>Won't Attend</label>
<input type="checkbox" name="No" data-field-type="Boolean">
<label for="First Name">First Name</label> 
<input type="text" name="First Name" data-field-type="Text">
<label for="Last Name">Last Name</label> 
<input type="text" name="Last Name" data-field-type="Text">

Answer №2

Are you referring to all labels? Simply include an empty &nbsp;, <label>, and clear: none;.

label {
  width: 135px;
  clear: left;
  text-align: right;
  padding-right: 10px;
}

input,
label {
  float: left;
}

.Checkbox{
  clear:none;
}
<label for="Email Address">Email Address* </label><input type="text" name="Email Address" data-field-type="Text" required="required" data-validation-message="Required field.">

<label for="First Name">First Name</label> <input type="text" name="First Name" data-field-type="Text">

<label for="Last Name">Last Name</label> <input type="text" name="Last Name" data-field-type="Text">
<label>&nbsp;<!-- Just Empty--></label>
<label class="Checkbox"><input type="checkbox" name="Yes" data-field- 
   type="Boolean">&nbsp;Will Attend</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using "-webkit-overflow-scrolling: touch" can cause issues with the CSS 3D perspective rendering

Looking for a solution specifically for iOS Safari Using -webkit-overflow-scrolling: touch seems to disrupt the 3d perspective on iOS devices. Check out the demonstration on CodePen. HTML <div class="pers"> <div class="scroll"> <di ...

The importance of color value is underscored

Is there a way to remove the surrounding color from the value in Visual Studio Code and only display the little square on the left side? [.nav-link-wrapper a { color: #ec0b0b } ] https://i.stack.imgur.com/5uA9k.png ...

Is it possible to determine the height of a div that has been assigned `overflow-y: auto`?

Is it possible to determine the height of a div element with its content without using overflow-y: auto? I would like to keep overflow-y: auto applied but still be able to calculate the height of the div as if the overflow property was not there. Specifi ...

Arrange two Angular 2 divs in a single row, with one positioned below the

Good Evening, I have a project in angular and I need help with styling. Specifically, I have 3 divs - card, table, and map. I want the card and table to be in the same row, and the map to be below them with double the size. The top left should have item in ...

Ways to incorporate CSS padding into a website displayed in a webView

I have been trying to figure out a way to apply padding-bottom (Custom CSS) to a webpage fetched from RemoteConfig (URL provided). Unfortunately, I do not have direct access to the webpage's source files for editing. Below is the code snippet in ques ...

Creating collapsible column functionality for the <td> element within a <tr> in mobile view using React

Ensuring my websites have a consistent look across various devices is a top priority for me. I currently have a table that is displayed like this: https://i.sstatic.net/a91LL.png Is there a way to modify this table so that when viewed on mobile, the < ...

What is the method to apply a class exclusively to an img tag?

While using the Cycle2 Carousel plugin, I encountered an issue with the class being set for my thumbnails. The plugin sets the .cycle-pager-active class for both images and divs, which is not ideal. I attempted to fix this by adding 'img' before ...

Swap a jQuery class with another if the class for ul li is currently active

I am currently developing a form builder and I would like to customize the appearance, specifically changing the color of the text. I want the text to be white when the class is set to active, and black when the class is not active. Is there a way to achi ...

What is the process for incorporating a dropdown field and editable field within a container?

Looking to create a unique setup by incorporating dropdown fields and editable text fields within a designated box, similar to the image provided. Any tips on how to successfully implement this design? https://i.sstatic.net/6tGMp.jpg ...

Struggling with Responsive Design Challenges with Grid Material UI?

Encountering an issue while using the Grid Component in my React JS Project. Let's delve into some code and then I'll explain what I aim to achieve with images: Assuming this is the rendered code: <div style="margin:100px 20%; width:80%" &g ...

Bootstrap - encompassing or layering columns

I am trying to create a layout where two columns overlap or cover each other. The layout should consist of one column on the left side (6 columns) and one on the right side (6 columns). The desired result is to have: left side (8 columns) and right side ...

What is the best way to use CSS to adjust the width of an input type file?

I am looking to adjust the width of the HTML tag and also style the browse button in the input type file. In my search for solutions, I found: Is there a way to set width of input type file for showing in Firefox? and Setting uniform input type file wi ...

Display HTML content using AJAX within a div element

Within my HTML code, I have the following: <li class="register"><a href="">Registreer</a></li> as well as <div id="content"> </div> I attempted to load an HTML file into the div using the code below in the header se ...

Executing a jQuery event after a div's background-image has finished rendering

Greetings and thank you for sparing a moment. I'm curious to know if there exists a method through jQuery to execute a function immediately after a background image in a div has completed downloading and rendering. Imagine you have the following div ...

Attempting to shift an element without relying on the use of position:relative

I'm trying to figure out if I can relocate this (image1) to (image2). I prefer not to utilize position:relative as it may disrupt my design in bootstrap. Image 1 (I don't want it here) Image 2 ( I want it here) Here is the relevant CSS code: ...

Issue with Angular JS: Unable to remove uploaded files

I'm currently learning about AngularJS and I've been working on uploading and deleting files. However, I've come across an issue with deleting files. Below is the HTML code: <div> <ul> <li ng-repeat="files in table.proce ...

Erase the Japanese content from the input

Having trouble removing Japanese characters from a text input box using jQuery. Here is the code I am trying: $('#email').keyup(function () { this.value = $(this).val().replace(/[^a-zA-Z0-9!.@#$%^&*()_-]/g,''); }); // try &l ...

What is the reason for hasChildNodes returning true when dealing with an Empty Node?

When the user clicks on purchase and the cart is empty, there should be an alert. However, it seems that no response is triggered. Upon running the program, an error message appears stating that it cannot read the property of addEventListener which is unde ...

An iframe for the Vimeo player set to 100% of

I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw. I was able to adjust the wi ...

Altering CSS attribute values using a random number generator

Is there a way to randomly change the animation-duration attribute in the following CSS code? I want it to range from 0 to 1. @keyframes blink { 50% { border-color: #ff0000; } } p{ animation-name: blink ; animation-duration: 0.1s ; animatio ...