I've just launched a new website and it all seems 99% fine (still needs a few tweeks here and there), but there's an annoying problem with how the form input on the main index page appears on iPads/iPods/iPhones. The form input I'm refering to is the one in the middle of this page: http://www.joyokanjikai.com – it looks fine (dark blue) on the site when viewed by a regular browser, but looks terrible when viewed on Apple devices (faded and generally just horrible).
Any ideas what's gone wrong with my CSS?
Many thanks,
Brin (still learning web design – definitely not a pro)
Can you see what I mean? The input button appears totally different (faded etc) on my iPod... I want it to look the same as the button (which is not an input but rather just a regular old styled link) shown in Image 3.
Hi all,
I've just launched a new website and it all seems 99% fine (still needs a few tweeks here and there), but there's an annoying problem with how the form input on the main index page appears on iPads/iPods/iPhones. The form input I'm refering to is the one in the middle of this page: http://www.joyokanjikai.com – it looks fine (dark blue) on the site when viewed by a regular browser, but looks terrible when viewed on Apple devices (faded and generally just horrible).
Any ideas what's gone wrong with my CSS?
Many thanks, Brin (still learning web design – definitely not a pro)
P.S. this button (a regular link, not a form input) looks fine on iPads/iPods/iPhones: http://www.joyokanjikai.com/random-kanji/ ...
I don't get it it just looks normal time with default styling and not ugly
Hmmm...sorry if I wasn't clear before. I've created three images to help show what I mean:
--- Image 1: showing how the input button looks on my Mac in Firefox --- http://www.joyokanjikai.com/temporary-folder/in-a-browser-on-a-computer.jpg
--- Image 2: showing how the same input button looks on my iPod --- http://www.joyokanjikai.com/temporary-folder/how-it-looks-on-my-ipod-NOT-GOOD.jpg
--- Image 3: showing how I'd like the input button to looks on my iPod --- http://www.joyokanjikai.com/temporary-folder/how-it-should-look.jpg
Can you see what I mean? The input button appears totally different (faded etc) on my iPod... I want it to look the same as the button (which is not an input but rather just a regular old styled link) shown in Image 3.
Thanks, Brin
Add this:
-webkit-appearance: none;Edit: And just to be safe, you could also add:
This disables browsers from using their native appearance for elements such as input fields.
Hiya,
I've added the above to make:
searchform input {
-moz-appearance: none; appearance: none;
}
but it appears to have made no difference... Any more ideas?
Brin
Sorry, forgot the code tags:
searchform input {
}
There is only -webkit-appearance: none; working at the moment, other browsers will perhaps support it in the near future.
hmmm: there should be a hash infront of "searchform" but it's not appearing above.
Aha...now added "-webkit-appearance: none;" and IT HAS WORKED! THANK YOU. ^^ Oh, and: Merry Christmas!
[SOLVED]