Checkbox and dropdown arrows invisible in chrome

For some reason my checkboxes and dropdo开发者_如何学Pythonwn arrows are not visible in chrome, however, they still work.

They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.

Anyone know what the problem might be?

Reference image: http://i.imgur.com/Q66w6.png

A 'solution' to this Chrome problem is to

• open Task Manager
• refresh the page in Chrome while the Taks Manager is open in front of the browser.

I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.

In webkit browsers the following code will remove dropdown arrows.

select{
  -webkit-appearance:none;
}

Checking in your browsers inspector will indicate if it's being applied in your case or not.

Found this question while having the same problem.

Setting:

input {
   width:100%
}

was the cause of the problem for me. This:

input[text] {
   width:100%
}

was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.

As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.

I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.

If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.

<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>

or you can set style="width:auto" on the input itself

I had the same issue

Try this css style supression all style that acts in the input checkbox element.

-webkit-appearance: checkbox!important; 

I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.