WordPress css <select> element
In a wordpress site I am using an html <select> element with about 21 options.
It works perfectly in Firefox & Safari.
In Chrome, it has odd behavior the slider on the right does not have a slide element in it. Site visitors cannot see the end of the options list (last 3 elements).
In the Theme css, I see this:
input,select,textarea{ -moz-border-radius: 0px; -webkit-border-radius:0px;
In another case, the -webkit thing caused issues with radio buttons in Chrome. I removed that (at the suggestion of an expert) & the radio buttons worked fine.
You can see what I get by going to rain1.com/new-site/service
How can I fix this?
Thanks
It works perfectly in Firefox & Safari.
In Chrome, it has odd behavior the slider on the right does not have a slide element in it. Site visitors cannot see the end of the options list (last 3 elements).
In the Theme css, I see this:
input,select,textarea{ -moz-border-radius: 0px; -webkit-border-radius:0px;
In another case, the -webkit thing caused issues with radio buttons in Chrome. I removed that (at the suggestion of an expert) & the radio buttons worked fine.
You can see what I get by going to rain1.com/new-site/service
How can I fix this?
Thanks
ASKER
Jason,
Yes, in my Chrome too, it looks like what you saw.
But two different people on different computers experienced the behavior I described. One of them JUST downloaded chrome today, just to test this, so they have the latest version.
I don't know what to do.
Put 22 radio buttons on the page?
Yes, in my Chrome too, it looks like what you saw.
But two different people on different computers experienced the behavior I described. One of them JUST downloaded chrome today, just to test this, so they have the latest version.
I don't know what to do.
Put 22 radio buttons on the page?
Put 22 radio buttons on the page?
Up to you. I can't fix what I can't see as broken, though.
Can those users replicate it on every page access?
Is caching in play?
Security settings on the local machine blocking access?
Are those users manually zooming the browser magnification?
ASKER
Jason,
I set up an independent test, whole page just this code:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
Test Select<br>
<select name="sel">
<?php
for ($i = 1; $i < 26; $i++) { ?>
<option value="<? print $i; ?>"><? print $i; ?></option>
<? } ?>
</select>
</body>
</html>
When I FIRST open it in Chrome & click the darker bar on the right, it does nothing.
The 2nd time I click it, it lets me move up & down.
It's hard for me to believe there is an overall issue in Chrome
I set up an independent test, whole page just this code:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
Test Select<br>
<select name="sel">
<?php
for ($i = 1; $i < 26; $i++) { ?>
<option value="<? print $i; ?>"><? print $i; ?></option>
<? } ?>
</select>
</body>
</html>
When I FIRST open it in Chrome & click the darker bar on the right, it does nothing.
The 2nd time I click it, it lets me move up & down.
It's hard for me to believe there is an overall issue in Chrome
ASKER
Jason,
There are some illusions to it here:
http://stackoverflow.com/questions/21166379/html-select-scroll-bar-not-functioning-correctly-in-chrome-32
But I tried the jsfiddle in my Chrome, it worked fine.
Richard
There are some illusions to it here:
http://stackoverflow.com/questions/21166379/html-select-scroll-bar-not-functioning-correctly-in-chrome-32
But I tried the jsfiddle in my Chrome, it worked fine.
Richard
ASKER
Jason,
What's the downside if I remove { -moz-border-radius: 0px; -webkit-border-radius:0px;
from the theme CSS?
Other than the issues you discussed re the radio button.
Thanks
What's the downside if I remove { -moz-border-radius: 0px; -webkit-border-radius:0px;
from the theme CSS?
Other than the issues you discussed re the radio button.
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
What's the downside if I remove { -moz-border-radius: 0px; -webkit-border-radius:0px;border-radius:0px; }
Other stuff may look funny? I don't think it's a huge issue to kill it, just make sure you retest things before going to production.
ASKER
We decided to try using the size parameter on the <select> element to force display of all 21 options at ALL times; had to rearrange the page a little, not sure the customer will like it but onward & upward.
Richard
Richard
Not in my Chrome...