Align checkboxes vertically with CSS styling

Currently in the process of transferring our website forms to our new emailing platform, Pardot from Salesforce. Utilizing their CSS editor to design the forms, but I'm lacking experience in CSS. Managed to get the checkbox labels aligned vertically, however, they appear in a diagonal line instead of straight. Any suggestions on how to correct this?

Additionally, I've included an image showing how the form appears on the website.

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

Below is the CSS code being used:

pardot-form input[type="checkbox"] {
  background-color: #fff;
  color: #666;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.75em;
  height:18px;
  width:18px;
  padding:0;
  margin-top:5px;
  display:block;
  float:left;
}
cssformscheckboxalignmentpardot

Answer №1

Do you think this will meet your needs? I extracted some basic form elements from an existing Pardot form.

form.form input[type="checkbox"] {
    background-color: #fff;
    color: #666;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    line-height: 1.75em;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-top: 5px;
    display: inline;
}
    <form class="form">
     <p class="form-field company col-sm-12 Main_Alarm_Equipment_Used pd-checkbox required required-custom    ">
      <label class="field-label" for="1">Which mailing lists would you like to sign up for? (Check all that apply)*</label>
      <span class="value"> <span>
      <input type="checkbox" name="2" id="2" value="598212" onchange="">
      <label class="inline" for="2">General Information</label>
      </span> <span>
      <input type="checkbox" name="3" id="3" value="598214" onchange="">
      <label class="inline" for="3">Membership</label>
      </span> <span>
      <input type="checkbox" name="4" id="4" value="598216" onchange="">
      <label class="inline" for="4">Alumni</label>
      </span> <span>
      <input type="checkbox" name="5" id="5" value="598218" onchange="">
      <label class="inline" for="5">Show</label>
      </span> <span>
      <input type="checkbox" name="6" id="6" value="598220" onchange="">
      <label class="inline" for="6">Band</label>
      </span> </span> </p>
    </form>

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

Is it possible to utilize formatted strings in Python selenium to locate elements based on different categories such as xpath, css, etc?

An interesting revelation just hit me and it's quite unsettling since my entire program relies on locating elements by CSS selector using formatted strings. Let's consider this example: stop_iteration_for_foh = driver.find_element_by_css_selecto ...

pythonhtmlcsspython-3.xselenium

How to retrieve data from MySQL using PHP by searching multiple rows separated by commas

I am looking for a tracking system similar to DHL, where I can track shipment numbers from my MySQL database using a PHP form. However, I need the ability to search for multiple rows separate by a comma in PHP and MySQL. https://i.sstatic.net/cTXiU.jpg &l ...

phpmysqlformsexplodeimplode

Rearrange the position of one div to be placed next to another div and assign the float property

I have numerous divs located on my webpage, including .rightColumnBar and .divAttributes. HTML <div class="mainContent"> <div class="pageContent"> <form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" nam ...

javascriptjqueryhtmlcss

What is the best method for expanding the width of a <rect> element with animateTransform?

How can I make a <rect> in SVG expand its width using animateTransform based on a specified value? Additionally, I want the color of the <rect> to change according to the following conditions: If the <rect> value is between 0 and 29: {f ...

javascriptcssd3.jssvg

Scrollable content below the div

I have encountered an issue where a div is positioned above another div, and when I scroll the upper div to the bottom, it ends up scrolling the entire body. To better illustrate this problem, I have created a demo on JSFiddle: http://jsfiddle.net/2Ydr4/ ...

csshtml

how to choose the :after pseudo-element with jQuery

Below are the codes I have tried. When this popup appears, I want to be able to close the entire popbox using the close button. CSS code .bigdiv{ display:none; background-color:#efefef; box-shadow: 10px 10px 10px 100000px rgba(0, 0, 0, 0.4); ...

javascriptjqueryhtmlcss

Dropdown menu remains unable to open

One of the dropdown menus on my website is not retracting back properly, but only on the contact page where a Google map is displayed. The issue looks like this: I've tried tweaking the CSS code without success. What could I be missing? Should I prov ...

htmlcssdrop-down-menu

Displaying the age figure in JSX code with a red and bold formatting

I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below t ...

javascriptcssreactjsconditional-statementsfont-size

Stacking SVG elements can lead to distortion effects

Currently experimenting with the innovative SVG stacking method to integrate multiple icons into a single file, reducing the browser's HTTP requests. The details of this technique can be found in depth here. In essence, it involves placing numerous S ...

htmlcsssvg

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

htmlcssasp.net-corefrontendweb-frontend

How can I display the value of a Django form input range?

I am seeking guidance on displaying the current value of a range input slider in Django 2. Currently, the slider does not show any values and I am hoping to find a simple solution without having to save the value each time it changes. Form: scale = forms ...

djangoformsinput

Arrange and overlay PNG images within a Bootstrap container using position:absolute

I've been attempting to align and stack some images within a bootstrap grid, but I'm having some trouble. Instead of aligning within the grid, the images seem to align to the window instead. I've been using position:absolute, which I found ...

csstwitter-bootstrapcss-position

What is the best way to position a title and subheading alongside an image?

I am currently working on developing a blog using php and html to enhance my coding skills. On my website, I have a special category where I display posts, the number of which can vary. Each post is composed of a title, a subheading, and a placeholder div ...

htmlcsstext-align

Tips for aligning navbar-items vertically in a Bootstrap 5.3 navbar

The navbar is currently transparent, but when scrolling down, it has a white background. However, in the white background, it is not vertically centered. I would greatly appreciate it if you could provide the solution as a URL in CodePen Code: <lin ...

htmlcssbootstrap-5

Basic HTML user interface elements

I'm struggling with some basic HTML/CSS and I'm looking for guidance on what I might be doing incorrectly or if there is a more efficient approach? I'm attempting to create a simple user interface, and while I have put this together, it doe ...

htmlcssuser-interface

Display a placeholder if image source is not working or missing

Looking to display a logo in next.js, my plan is to show a span if the logo is not available and hide it if it is. <div className='brand'> <Link href="#"> <img src="#" alt="UnSet" /> <s ...

cssnext.js

How can user input be converted into a JavaScript variable?

Looking for help with my webpage - I want users to input their name and age. After hitting submit, I'd like the first input to be stored in a variable called 'name', and the second input in a variable called 'age'. Is this doable? ...

javascripthtmlforms

Retrieve the content from a textarea and insert it into a different textarea with additional text included

Users can input HTML codes into a textarea named txtar1. A 'generate' button is available; Upon clicking the 'generate' button, the content of txtar1 will be transfered to another textarea named txtar2 with additional CSS code. Here&ap ...

javascriptjqueryhtmlcss

Gradient Border on CSS Button

I'm trying to create a button with a silver-ish border and gradient like the one in the picture. I've managed everything except for the border, which is giving me some trouble. Here's the current CSS code I'm using for the button. http ...

htmlcssbutton

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

csshtmlatom-editorcsslint