Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Radio Buttons not visible in chrome

Posted on 2015-02-15
8
Medium Priority
?
2,409 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 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

609 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