Give help. Get help.

  • # December 24, 2012 at 2:31 pm

    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: – 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:

    # December 24, 2012 at 3:50 pm

    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 —

    — Image 2: showing how the same input button looks on my iPod —

    — Image 3: showing how I’d like the input button to looks on my iPod —

    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.


    # December 24, 2012 at 6:26 pm

    Add this: -webkit-appearance: none;

    And just to be safe, you could also add:

    -moz-appearance: none;
    appearance: none;

    This disables browsers from using their native appearance for elements such as input fields.

    # December 25, 2012 at 4:33 am


    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?


    # December 25, 2012 at 4:35 am

    Sorry, forgot the code tags:

    #searchform input {
    -moz-appearance: none;
    appearance: none;

    # December 25, 2012 at 4:36 am

    hmmm: there should be a hash infront of “searchform” but it’s not appearing above.

    # December 25, 2012 at 4:38 am

    Aha…now added “-webkit-appearance: none;” and IT HAS WORKED! THANK YOU. ^^ Oh, and: Merry Christmas!

    # December 25, 2012 at 4:41 am


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.