CODEWITHSUNDEEP
csshtml
Cloudburst
Cloudburst

Reputation: 13

Checkbox not displaying

I am trying to integrate an HTML 5 required checkbox into a form:

<p>
  <input class="checkbox" type="checkbox" required name="terms"> By submitting you agree to the processing of your data for the purpose of processing your request/booking.
  <br>
  <a href="/en/datenschutz.php" target="_blank">
    <u>Privacy  Policy</u>
  </a>
</p>

It is not displaying in a single browser. I haven't had this problem with other sites before, this site is running Bootstrap v2.2.2.

I found some possible solution with labels which didn't work.

Upvotes: 0

Views: 19796

Answers (3)

Risheek Reddy
Risheek Reddy

Reputation: 31

Your style.css might contain the appearance css property. This is used to display an element using platform-native styling, based on the operating system's theme. Look up : https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

your code might contain a css rule such as:

input {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

if you wanna keep this property and change the checkbox specifically then use :

input[type="checkbox"] {
    appearance: checkbox !important;
}

Upvotes: 3

Ankit Jaiswal
Ankit Jaiswal

Reputation: 274

You can use both css. But here style="display: inline-block;" inside input type are override display: none; 

input.checkbox {
    display: inline-block;
}

/*input[type="checkbox"] {
    display: inline-block;
}*/
<p>
  <input class="checkbox" type="checkbox" required name="terms">By submitting you agree to the processing of your data for the purpose of processing your request/booking.
</p>

<a href="/en/datenschutz.php" target="_blank">
  <u>Privacy  Policy</u>
</a>

Upvotes: 1

Racil Hilan
Racil Hilan

Reputation: 25371

Your Style.css file has this rule:

input[type="checkbox"] {
    display: none;
}

Delete it and you will see your checkbox.

If you need that rule for whatever reason and you only want to override it for this particular checkbox, then you'll have to add another CSS rule to override it. Obviously, adding an inline style will do the job, but it might be not the best way to go:

<input class="checkbox" type="checkbox" required name="terms" style="display: inline-block;">

Upvotes: 5

Related Questions