Grow your CSS skills. Land your dream job.

CSS mac style defaults on windows computer

  • # January 16, 2013 at 5:14 am

    I have a webapp that I’m working on using my mac. I really like how it looks with the mac os defaults (rounded form elements, buttons, etc) but on a windows machine it looks terrible. Anyone have any suggestions of how I could make it so windows machines see it like a mac view using the css?

    # January 16, 2013 at 1:34 pm

    I’m not sure I understand. CSS doesn’t care (for the most part) about what OS you are viewing a website in.

    Are you more referring to the difference between Chrome/Safari and Internet Explorer?

    # January 16, 2013 at 1:39 pm

    I think he’s referring to the defaults
    Some unstyled elements mimic the style of the OS they’re on

    # January 16, 2013 at 2:04 pm

    I assume he’s talking about select menus – that’s really the only thing I would say is blatantly different. Forms, I guess Search type?

    # January 17, 2013 at 6:52 am

    If you style your elements, the default style is dismissed. So just style a element to look like the default on Mac and that will be displayed the same on windows.

    # January 17, 2013 at 2:13 pm

    Ah yes – I missed the mention of form elements, nice catch guys.

    # January 17, 2013 at 2:57 pm

    http://codepen.io/alexmccabe/pen/neybf

    I made a codepen a while back. This has the default Windows and OSX buttons.

    # January 17, 2013 at 8:02 pm

    @alexmccabe : unless I misunderstand, the default Windows button in that pen isn’t absolutely default.

    Example: in my Windows (Chrome, IE and Firefox), a default button has square corners but in your pen, it has rounded corners.

    Makes sense? I’m on Win 8 by the way.

    # January 18, 2013 at 4:53 am

    I did the W7 buttons. That is why. The W7 buttons do have rounded corners. In W8 everything is squared off to match the overall style of the OS. If you wanted square corners, just remove the border radius.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".