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.
Related
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.
I'm using jquery mobile for my project. It automatically converts all radio buttons in its inputs with its styles. The major problem is that in different situations i have different number of buttons (it depends on user) with its different width and i need it every time center.
<div data-role="fieldcontain" id="inline" >
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
{section name=i loop=$data['input'] start=0}
<input name="position" id="radio{$smarty.section.i.index}" value="{$data['input'][i]}" type="radio" />
<label for="radio{$smarty.section.i.index}">
{$data['input'][i]}
</label>
{/section}
</fieldset>
</div>
As you see each button has his size (for example Up and Zoom In are different). As i said before - i don't know what buttons will be for each users - it depends on their own settings, so i need somehow automatize process of centering it - is some ideas?
You could try it with <a> instead of <input> as done in the documentation, if at all possible in your situation.
I'm working on some cross-browser form styling and have hit upon a snag in ie7.
If you look at my linked fiddle here in ie7 you will see that the input on the first line is offset. The span styled similarly below it is not subject to the same problem.
The system I'm testing works on every other browser I've tried.
Does anyone have a fix to this or indeed a simpler way to style it?
The answer is to wrap a div around all field elements undoing the hasLayout bug.
More info can be found here: http://my.safaribooksonline.com/book/web-development/css/9780321703392/the-usual-suspects/ch04lev1sec3
<form action="#" class="form-horizon">
<fieldset>
<legend>Test Form</legend>
<!-- div fixes hasLayout inherited margin bug in ie7-->
<div>
<label for="input-focused">Focused</label>
<input type="text" id="input-focused" class="focus" value="focused input" />
<label for="input-no-edit">Non editable</label>
<span id="input-no-edit" class="no-edit-input">none editable</span>
</div>
</fieldset>
</form>
Hi all I have been looking around as I am fed up with the lack of compatibility for styling submit buttons.
I was looking at no other than facebook themselves source.
They do something like this:
<label class="uiButton uiButtonLarge Post">
<input type="submit" value="Post" />
</label>
They set the css display for the label as an inline-block and then set padding etc..
Is this the best way to do it?
Or is there an even better way?
Thanks!
http://www.tripwiremagazine.com/2010/03/35-essential-submit-button-enhancements.html
This tutorials should be fine, sure they're not identical with FB but there are crossbrowser stylings to pure css. Hope that helps.
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.