Within the past few months, Google has updated Chrome and I think has broken radio buttons and checkboxes on my website. I'm using version 31.0.1650.63
They work correctly in all other browsers I've tried (FF, Safari, IE9 & IE10). I haven't modified my CSS at all the last few months, so that's why I think it's an issue with Google Chrome.
I've created a simple jsFiddle that shows the behavior I'm talking about (and an external link to my CSS file):
http://jsfiddle.net/v22WB/
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
I've used Chrome's dev tools to disable all styles from the stylesheet but with no luck.
I'm using Twitter Bootstrap 2.0.2, but when I reference that file by itself, the radio buttons and checkboxes are normal. Any ideas?
You've got this line in your stylesheet:
html body *:focus{outline-color:transparent;outline-style:none;-webkit-appearance:none}
The -webkit-appearance:none means input elements that have focus (ie a selected radio box or checkbox) aren't being displayed as input elements visually. See this link about customizing input styles. Take that out and your checkboxes should be back to normal.
Related
I am working on adding custom CSS styling for my checkboxes via Awesome Bootstrap Checkboxes and have them actually showing up in the grids with them initially being checked or unchecked properly via JSON data being read...
the issue is when I go to change the value. The values are updating properly from when shown to when hidden.
However, instead of just the checkmark disappearing in the checkbox, the entire checkbox disappears and the only way for me to get it back is to change the value of the back to ui-grid-cell-focus manually through F12 debugger in the browser.
It appears something is not set up right with them, but I haven't been able to pinpoint exactly what he issue is yet...any help would be appreciated.
Cell Template:
cellTemplate:
`<!-- .blueCheckbox --> <div class="checkbox checkbox-primary"> <input type="checkbox" class="ng-scope" value="true" name="select_item" ng-model="row.entity.Name" /> <label></label> </div> <!-- end .blueCheckbox -->,`
Got them working...Had to enable the checkboxes and move them underneath the overlay and they worked fine...weird because its totally different from how it normally works...
http://jsfiddle.net/4LXkE/
The code:
<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>
In the above fiddle, you can see that in IE9+ (that's what my target browser is) the input box is surrounded by an ugly red highlight and a popup message to show it is a required field.
I found the following question which is close, but doesn't give a full answer to my specific question:
override css for html5 form validation/required popup
In my application I have my own stylings (twitter bootstrap defaults) but they are hidden behind these styles which show up.
While I tried to debug the app in Developer tools, i couldn't find what CSS classes were being added or how.
Any help turning these off would be much appreciated, thanks!
IE9 does not support the "required" attribute natively, and it is not part of the UA stylesheet.
Are you using Modernizr or something similar along with Bootstrap? In IE9, the "required" attribute is useless without a polyfill. (see caniuse or this article for more information) Please look at Modernizr for a solution to this problem. If you're using a polyfill already, you should be able to style the shim element to get the appearance you want.
the problem is simple to explain, i have done a form, but the radio buttons are not showing in safari, and in chrome they are showing but they're not clickable.Is it a problem of css? The radio buttons are just as normal as they should:
<input type="radio" name="message" value="x" checked> Option
What am I doing wrong?
Agnese
Check if there are any elements overlapping, maybe you used floating without a clearfix which means your browser does not get the height of your form?
<input type="radio" name="message" value="x" checked="true"> Option
Try this. The checked needs to be set and not left empty.
Refer to the image below to see it in action. Tested on W3Shools itself.
This question already has answers here:
Turn off iPhone/Safari input element rounding
(11 answers)
Closed 9 years ago.
I'm using Twitter Bootstrap.
Here's a fiddle with my code. And here's the opened Github Issue
I have implemented a search input with an appended button, per the Bootstrap docs. My HTML for the form is shown here
<form class="form-search text-center" method="get" action="#">
<div class="input-append">
<input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1">
<button type="submit" class="btn"><i class="icon-search icon-large"></i> </button>
</div>
</form>
For some reason, when viewing the form on mobile (i.e. iPhone 5) the search box appears as displayed in the screenshot below:
When I view the search form in a desktop browser and resize it to "mobile size," the search box appears correctly as shown in this second screenshot (disregard the lighter border and size difference):
--------- QUESTION ---------
How can I prevent the search input from displaying incorrectly as in the first screenshot? And what could be causing this? I've looked at the source and computed styles for both search inputs, and everything appears to be the same. Help?
If I change the input type="search" to type="text" the problem does not exist, so it's got to be somewhere in the CSS, but I can't figure it out. What CSS actually applies this effect?
--------- UPDATE ---------
If I switch <div class="input-append"> to <div class="input-prepend"> the search input displays correctly. Also, when the field has focus, the rounded corner on the right turns "square" and appears correctly.
Looks like you can not. See this link
webkit html5 search inputs
quote:
WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit "no matter what", as in, you can't even fight against it with !important rules.
In others words, Safari will ignore your styles, and apply the standard look.
I'm styling a form that was already marked up (made some markup changes), and I normally work in Firefox to style so I can use firebug and the web developer toolbar.
On this project, I noticed that my styles are displaying quite differently for one particular area (several elements) in webkit based browsers Chrome and Safari, than in Firefox (we won't even get into Internet Explorer, although it is siding with the Firefox display).
I can't figure out though why the styles are displaying so differently. Normally there is some rule that I'm neglecting that Firefox just takes for granted, and the others need it specified. But here I'm not getting why it's displaying this way. In particular I'm referring to the bottom area of the form where users can enter their contact info, then submit the form. I'll attach screen shots for reference as to the discrepancy.
Here's the URL so feel free to check it out on your own. Although be advised that this is a production page (already released) so if you try out the form, you WILL BE added to CURE's contact database.
http://www.helpcurenow.org/survey2010
Here's the screen shots:
Firefox (the way I intend it to look) alt text http://static.helpcurenow.org/images/test/firefox.jpg
Chrome, and then Safari - strange change to submit button alt text http://static.helpcurenow.org/images/test/chrome.jpg
alt text http://static.helpcurenow.org/images/test/safari.jpg
As a bonus, if anybody wants to help me with figuring out why on earth IE7 wants to not show the background behind the questions only, and how to fix that I would be much obliged!
Thanks very much.
Your <ol> is not closed, which makes webkit place the submit button inside the <fieldset> in an attempt to fix up your code.
FF and Webkit browsers do have a few differences, I have encountered them as well, especially with forms!
I solved it by splitting my CSS to target the two browsers with the CSS Browser Selector script. Worked wonders, just set some things differently for Webkit and fixed the whole thing.
Do you have a live example or some source code to post up so we can help you more with your IE7 issues as well?
Hope that helps.
Edit:
<ol>
<li class="contact-info">
<label class="field-required" for="first_name">First Name</label>
<input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" />
</li>
<li class="contact-info">
<label class="field-required" for="last_name">Last Name</label>
<input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" />
</li>
<li class="contact-info">
<label class="field-required" for="email_address">Email Address</label>
<input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" />
</li>
</fieldset>
<!--TransactionFields section end-->
<script language="JavaScript" type="text/javascript">
...
</script>
<div class="button-row">
<input type="button" name="SubmitButton" id="SubmitButton" value="Submit" onclick="SubmitForm425952(form);" class='HtmlButton' />
</div>
</form>
<!--form javascript-->
<script language="JavaScript">
...
</script>
NO OL
</div></td></tr>
</table>
</div>
<!--End Featured Content-->
Your <ol>hasn't been closed after the second script tag.
You may have forgotten -moz specific css rules.
For example - to use box-sizing you may have to specify -moz-box-sizing
Have you used browser reset css. Different browsers have different default styles for various elements, the reset CSS resets all these default styles so that stuff looks similar in all browsers.