Solved

Radio Buttons not visible in chrome

Posted on 2015-02-15
8
1,968 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

707 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