1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to align the 'checkbox' horizontally with the text line

Discussion in 'HTML & Website Design' started by chrisj, Mar 1, 2017.

  1. #1
    How do I align the 'checkbox' horizontally (even) with the text line?
    See attached image.
    Here's the line of code:

    <input type="checkbox" name="checkbox" value="check" id="agree"/> By uploading a file...
    Code (markup):
     

    Attached Files:

    chrisj, Mar 1, 2017 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Well, you might do this:
    
      input {
       vertical-align: middle;}
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 1, 2017 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thanks for your replies. Gary's suggestion worked great, thanks.

    Can anyone suggest how I can make the actual checkbox look more interesting?
    Thanks
     
    chrisj, Mar 1, 2017 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    To change the look of the checkbox, you "cloak" it by setting the actual checkbox to "display: none;" in the CSS, and attaching a proper container to it (normally a label, as they can be linked to the checkbox, and there fore inherit the ":checked" trait. Something like this, perhaps:
    
    <input type="checkbox" name="important_checkbox" id="important_checkbox"><label for="important_checkbox">This is a label <span class="mock_checkbox"></span></label>
    
    Code (markup):
    Then you style it something like this:
    
    #important_checkbox {
      display: none;
    }
    #important_checkbox + label span {
      border-radius: 50%;
    border: 1px solid black;
    background: blue;
    width: 1em;
    height: 1em;
    margin-left: 1em;
    display: inline-block;
    vertical-align: middle;
    }
    #important_checkbox:checked + label span {
      background: green;
    }
    
    Code (markup):
    You can see this very simple example here: https://jsfiddle.net/mzuc64cz/

    You can of course use FontAwesome or images to provide even more fancy versions of the checkbox itself, you can also make proper empty boxes and checkmarked boxes using only CSS. There are plenty of tutorials and examples if you google "fancy checkboxes using only CSS" or similar terms.
     
    PoPSiCLe, Mar 1, 2017 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Some advice? While @PoPSiCLe's examples are a good approach, I'd suggest hiding them behind a media query so that legacy browsers that can't handle :checked still get something functional.

    This query:
    @media (min-width:1px) {
    Code (markup):
    Works great for targeting modern browsers only. You can then let legacy browsers get the plain-Jane checkbox.
     
    deathshadow, Mar 2, 2017 IP
    PoPSiCLe likes this.