www.webdeveloper.com
Results 1 to 2 of 2

Thread: iphone specific CSS styling

  1. #1
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356

    iphone specific CSS styling

    IMG_0116.jpg

    This is how this form looks on an iphone. On a desktop, the form fields have a dark background and white text. Is there a way via CSS to target the iphone CSS specifically and change the white text to black?

    I know I can do the following to get rid of all iOS styling:
    Code:
    .uwpqsf_class select {
     -webkit-appearance: none; -moz-appearance: none;
    }
    However, that also gets rid of the drop-down "arrow".

    I just want to change the white text to black for the drop down fields on the iphone. Any way to do it?

    Any input is appreciated.

  2. #2
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    That's very easy, but you do need a bit of Javascript:

    Code:
    <script type="text/javascript">
    if (navigator.platform.indexOf('iPhone') != -1) 
       document.documentElement.className += ' iPhone';
    </script>
    With this script, the class 'iPhone' is added to the html tag if the page is loaded on an iPhone. Next, it is simply a matter of applying it:

    Code:
    <style type="text/css">
    .iPhone xxxxxxx {
        color: black;
    }
    </style>
    at which xxxxxx = the selector(s) you're already using to style the element in question.
    Last edited by Frank62; 08-19-2014 at 01:19 PM.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles