Solved

Radio Buttons not visible in chrome

Posted on 2015-02-15
8
1,273 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
 

Author Comment

by:Richard Korts
ID: 40611058
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 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
 

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

760 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now