?
Solved

Radio Buttons not visible in chrome

Posted on 2015-02-15
8
Medium Priority
?
2,855 Views
Last Modified: 2015-02-15
I have pages where radio buttons do not show in Chrome but they do in FireFox.

See attachments.

Also, select dropdown is odd in Chrome.

Here is applicable html for radio:

Would you like us to contact you about performing lawn aeration in the fall?&nbsp;&nbsp;&nbsp;<input type="radio" name="lawna" value="y">&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="lawna" value="n">&nbsp;No<br><br>

This is a custom page in a WordPress site.
                                                
What causes this?
chrome-info-sys.jpg
ff-info-sys.jpg
0
Comment
Question by:Richard Korts
  • 4
  • 3
8 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40611055
Could you format the properly you sample HTML?
Put it inside a Code block without being encoded.

Do you have an URL that we can inspect the HTML directly?
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 40611071
You have a couple of problems there:
Problem 1: between visibility and visible you have a ; instead of :
But actually you can simple remove that inline styling from both elements.
<input type="radio" name="lawna" value="y" style="visibility; visible;">
<input type="radio" name="lawna" value="n" style="visibility; visible;">

Open in new window


Problem 2: This is what's actually causing you r problem.
Somewhere in your CSS your setting:
media="screen"
input, select, textarea {
-webkit-appearance: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

Open in new window

That first line (-webkit-appearance: none;) is what's causing the radio buttons to be hidden.
Just delete that CSS attribute from the style.css on line 53.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Closing Comment

by:Richard Korts
ID: 40611089
Fantastic.

Hope that doesn't cause other problems.

Isn't it true that if the theme is updated to a newer version the problem will recurr?

Can I put in custom css that will override that?

Not sure how to do that in WordPress.

Thanks
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40611102
Yes, if you update the theme probably it will come with the same problem.
To overcome this you have 2 options:
1. Document your change and create a theme update procedure check list. After all, I don't think you'll be updating the theme that often will you?
2. Override the CSS attribute adding a CSS file of your own after that Style.css:
media="screen"
input, select, textarea {
-webkit-appearance: normal !important;
}

Open in new window


Be also aware that as it comes from the theme, all inputs, selects and text areas are set as not to be displayed in all browsers that use webkit. Honestly I think this is a mistake of the theme.
Try to reach the developer and point out the issue.
0
 

Author Comment

by:Richard Korts
ID: 40611106
Thanks, I don't know how to add a css file of my own.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40611163
There are several ways to add a style of your own...starting from plugins all the way to using wp_enqueue_style() in functions.php.  While the fix above works, the better fix would simply be to add a class specific to radio buttons to get them to show and not remove something the original theme developer put in for a reason.

When the theme updates, it might blow away your customizations.  The solution to this is always develop using a child theme when possible.  If this isn't possible or feasible, add a second style sheet to the mix using wp_enqueue_style() in functions.php to preserve the sheet from version to version.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40611322
Still I think this is a mess up in the Theme.
Change your style.css directly and contact the theme developer.
He should fix it and release a new version. You update and it's solved.

If he doesn't reply of doesn't support the theme anymore then there's no problem either.
If it's like that, there won't be any more versions of the theme anyway :)
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question