My checkbox isn't displaying in Chrome. It displays in other projects, but not in this one. I tried adding input[type="checkbox"] {-webkit-appearance: checkbox;} to my CSS, but that didn't work either. I'm not sure what else to do.
My code:
<div class="row">
<div class="col-lg-4 col-lg-offset-8">
<form>
<input type="checkbox" name="playerLeaderStats" value="goals" />Goals
<br />
<input type="checkbox" name="playerLeaderStats" value="redCards" />Red Cards
<br />
</form>
<button type="button" class="btn btn-primary">Set</button>
</div>
</div>
Is this code where the checkbox does not working ?
It working on Chrome, Firefox, IE : result on Chrome v54
Did you see if you've forgot a css property who modifying this type of input ?
Look with the Page Inspector if your input is really where it supposed to be even if it not visible ?
Related
I'm using this CSS file:
https://ssl.gstatic.com/docs/script/css/add-ons1.css
Here's the code for the form I'm using:
<form id="myform">
<div class="block form-group">
<input type='text' required="required"/ style="width:300px;">
</div>
<div class="block">
<button type="submit" class="button">Submit</button>
</div>
</form>
I've tried to figure out how to change the button color from blue to orange, but I'm getting incredibly confused with all of the CSS lines. I tried to force some css styling into the button, but I think I'm messing up somewhere since all of my changes makes the button just look weird but doesn't actually change the color.
I inspected element and tried to make changes to various lines and I tried copying the CSS to my own website thinking it might be a caching issue, but whatever I try, I can't get the button to change from blue to orange, lol.
Don't know why you should be getting 'confused with lines of css'
why not add a class
.orange{
background: orange;
}
to the end of your css file,
and add orange to your html button code
<form id="myform">
<div class="block form-group">
<input type='text' required="required"/ style="width:300px;">
</div>
<div class="block">
<button type="submit" class="button orange">Submit</button>
</div>
</form>
let me know
I've found a strange behavior in IE. When HTML code inside <form> tag it won't work.
<div>
<label>
<img src="media/afternoon-1.jpg" alt="">
<input type="checkbox" name="afternoon[]" value="1" />
</label>
</div>
http://jsfiddle.net/SiZE/nss7qz85/
Have test it in IE 11.0.9600.17842
Is it possible to fix it without JS?
The following code works perfectly in Chrome, however it's broken in Firefox and IE. In these browsers it will not display the placeholder, nor will it allow the user to type in the input.
If you remove the input-group class, it will destroy the formatting, however it will fix both of these issues.
How can I fix this problem? Here's my code:
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-envelope"></i></div>
<input type="text" class="form-control" placeholder="Email address" />
</div>
</div>
A jQuery fix has been done for the placeholder to work in all browers.
Visit this link for the entire code placeholder
Hope,this helps!
I'm using a minimal bootstrap form input & fontawesome icon,
When the input is empty the cursor is slightly higher in its position,
And when there's something it shows like this (aka vertically aligned)
I'm not sure if it's a browser bug? I'm using chromium-browser 38 in Ubuntu.
Attached source code:
<div class="center-block text-center">
<form class="form-inline" role="form" action="#" method="post">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-automobile"></i>
</span>
<div class="form-group">
<input class="form-control" name="q" type="text" />
</div>
</div>
</form>
</div>
This is a browser specific behaviour.
Only chrome exhibits this kind of behaviour
You will not see this in Firefox or IE.
And this case is only for an empty input field in Chrome. If you are using a placeholder text for the input box, then there will not be any issue with the alignment.
I have a quantity selector on a webpage. I used a trick to make them inline without any gaps.
<div id="quantitybar">
<span class="inputwrapper">
<button id="piece_plus">+</button>
<input type="text" value="1" id="pieces" />
<button id="piece_minus">-</button>
</span>
<input type="submit" value="Add to cart" />
</div>
Here's my fiddle: http://jsfiddle.net/86sZ7/
It looks nice in Chrome, but in Firefox the bottom border of the text imput field is missing a piece. If I set overflow: hidden to the span then it looks OK, but the submit button is shifted down.
I want to make it look the same in Chrome and Firefox. Plus: it would be nice to have the submit button align with the other inputs too, because now it's a little off.