jeudi 14 décembre 2017

How can I format my checkboxes in a form using CSS? I want a simple look and feel

I have searched many sites, including this one and I cannot get this to work. I have a simple form Job Application where you can see the example of the formatting not working.

I would like just a simple checkbox, nothing fancy, using CSS to format it. I have tried multiple examples and it just never comes out right.

Here is my code for the checkbox:

                <p>
            <label >Position: check all you are interested in </label>
            <input type="checkbox" name="job[]" value="General Pickle Production">General Pickle Production</input>
            <input type="checkbox" name="job[]" value="Fryer">Fryer</input>
            <input type="checkbox" name="job[]" value="Sales">Sales</input>
            <input type="checkbox" name="job[]" value="Manager">Manager</input>
            <input type="checkbox" name="job[]" value="Overnights">Overnights</input>

            </p>

Here is a snippet of my style sheet:

form {
  background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  margin: auto;
  position: relative;
  width: 750px;
  height: 1200px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;

  line-height: 24px;

  color: #000000;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

}

label {
  text-align: left;
  width: 200px;
  display: flex;
}

input {
  width: 300px;
  float: left;
}

fieldset p {
   clear: both;
   padding: 10px;
}

input[type=radio], input[type=checkbox]{
 flex: none;
} 

textarea#feedback {
 width: 400px;
 height: 150px;
}

Is there just a simple way to resolve this? Any help is much appreciated. Thank you!




Aucun commentaire:

Enregistrer un commentaire