Home/ Questions/Q 8575103
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T19:37:14+00:00

I have a form in which the radio buttons and checkboxes look like this:

  • 0

I have a form in which the radio buttons and checkboxes look like this:
enter image description here

I would like to know if I can get rid of the distance between the buttons and their labels in some way. I also like to to move the buttons to the leftmost side of the form. Almost under the question number.

This is currently the CSS to my radio buttons:

.radio{
direction: ltr;
  padding: 0 5px 0 0px;
  display: block;
  clear: left;
  float: left;
}

Also my whole form works under a called stylized with a css as the following if it helps:

/* ----------- stylized ----------- */
#stylized{
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
}

#stylized p{
    font-size:11px;
    color:#666666;
    margin-bottom:20px;
    border-bottom:solid 1px #b7ddf2;
    padding-bottom:10px;
}
#stylized label{
    display:block;   
    text-align:right;
    width:140px;
    float:left;
}
#stylized link {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    text-decoration:none;
    color: #FFA500;
}
#stylized .small{
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:140px;
}
#stylized input{
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:2px 0 20px 10px;
    background-color: #EEE8AA
}
#stylized input:active { background: #FF7F00 !important; color: black; }
#stylized input:focus { background: yellow; color: black; }

#stylized select{
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:205px;
    margin:2px 0 20px 10px;
    background-color:#C1FFC1;
    direction: ltr
}


#date select{
    float:left;
    font-size:10px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:60px;
    margin:2px 0 20px 10px;
    background-color:#FFDAB9
}


#stylized textArea{
    float:left;
    font-size:10px;
    font-family: verdana,arial,sans-serif;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:330px;
    height:100px;
    margin:2px 0 20px 10px;
    background-color: #EEDD82
}
#stylized textarea:active { background: #FF7F00 !important; color: black; }
#stylized textArea:focus { background: yellow; color: black; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The best way to work with css styling issues, is to open the page in Google Chrome, then right click on the section in question, and click “Inspect Element”. Then you will see the css that is responsible for what you selected on the right side style display. You can change these items from there without reloading the page.

    So what I recommend for you is to do that, then on the display: block; that is in the right side display, change it to display: none;. You can make minor changes like this throughout until you get the look you want then update your actual css.

    • 0