Solved

Radio Buttons not visible in chrome

Posted on 2015-02-15
8
1,391 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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.
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 purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

895 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

11 Experts available now in Live!

Get 1:1 Help Now