Cascading Style Sheet(CSS): The Hack Book

Published On: 25 Mar, 2015 Updated On: 30 Jun, 2016

This blog consists of gist of different tried and tested browser hacks. It includes something I found over internet, something I found by myself etc. I try to keep this blog updated with newer and interesting notes. Stay tuned! Feel free to comment below. Thank You!

Some Common Browser Hacks

Design Cross-Browser Select Dropdowns Using CSS Appearance Property

Many times, we’ve to design select dropdowns with background images or just flat UI with a small arrow at the right end. But browsers like Safari adds their own vendor specific styles (if we’re not very cautious) and things get weird. Below snapshot is one such weirdness.

Browser Vendor Specific Select Dropdown Weirdness

We’ll troubleshoot this issue by normalizing select dropdown styles and adding some additional styles in order to acheive desired effect across all browsers.

Below is the code to solve this problem.


<div class="selectElemContainer">
  <select>
    <option value="">Select Country</option>
    <option value="INDIA">India</option>
    .
    .
    and so on...
  </select>
</div>


.selectElemContainer select
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 9px 12px;
  min-width: 275px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.selectElemContainer
{
  width: 200px;
  overflow: hidden;
  position: relative;
}

.selectElemContainer::after
{
  position: absolute;
  content: "";
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid;
  right: 10px;
  top: 18px;
}

Internet Explore Hacks

Remove Arrow Icon From Select Dropdown In IE

Sometimes, we need to style select dropdowns differently like I mentioned above in generic browser hacks section. But, the arrow icon of select dropdown is a bottleneck. Fortunately, there is a cross-browser compatible solution which helps you design select dropdowns effectively. Check out below code snippet.


select
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* -ms-expand is psuedo element which represents the arrow icon in IE browsers */
select::-ms-expand
{
  display: none;
}

Remove Cross Icon From Text Boxes In IE

When you start typing something in text box, modern internet explorer displays cross icon at extreme right. Basically, IE uses a psuedo element called “-ms-clear” and we’re lucky that we can control it using CSS.


input[type="text"]::-ms-clear
{
  display: none;
}

Chrome Hacks

If you are facing some CSS issue on only Chrome browser, use below CSS code to hack it.


body
{
  color: #00FF00; /* Text color is GREEN by default*/
}

@media all and (-webkit-min-device-pixel-ratio:0)
{
  body
  {
    color: #FF0000; /* Only in Chrome, text color would be RED */
  }
}

Firefox Hacks

For any Mozilla Firefox only CSS hack, you can use “@-moz-document url-prefix()”.


body
{
  color: #00FF00; /* Text color is GREEN by default*/
}

@-moz-document url-prefix()
{
  body
  {
    color: #FF0000; /* Only in Firefox, text color would be RED */
  }
}

Remove Dotted Lines From Select Boxes In Firefox


@-moz-document url-prefix()
{
  select, select:-moz-focusring, select::-moz-focus-inner
  {
    border: 0;
    color: transparent;
    text-shadow: 0 0 0 #000000;
  }
}

Safari Hacks

Safari 5.1.x Only Hacks


body
{
  color: #00FF00; /* Text color is GREEN by default*/
}
_::-moz-svg-foreign-content, body
{
  color: #FF0000; /* Only in Safari 5.1.x, text color would be RED */
}

/* For multiple values in a single stretch */
_::-moz-svg-foreign-content, ul, ol, p, h1
{
  margin: 0;
}

iPad Hacks

CSS Issue With Input Elements In iPad and iPhone

Many of the times, we want to style input buttons, text boxes, text areas differently. We will apply simple logic as given in below code.


/* We're creating a button with lightblue background */
input[type="button"]
{
  background-color: lightblue;
  border: none;
  border-radius: 4px;
  color: white;
}

/* We're creating a text input box with some styles */
input[type="text"]
{
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 10px;
}

Though the above code works in most of the browsers, in iPad’s and iPhone’s Safari browser, it doesn’t work as expected. iPad/iPhone apply their own User-Agent styles and make them look different. In order to make it work, we need to add below code.


input[type="text"], input[type="button"]
{
  -webkit-appearance: none;
}

Focus Issue In iPad For Text Boxes Present Inside IFrames

Problem Statement:- You have a web-app inside iframe which is fixed positioned. Let’s imagine it has few textboxes. Type something into the textbox, scroll the iframe a little, now again try to type into it. If you are lucky, you’ll find that even though your cursor is inside the textbox it’s not taking any inputs. (i.e. no textual content update for the textbox). Below code is a fix for this issue.


body
{
  /*
    Note: Please note that this CSS styling might disturb your iframe
    if its positioned fixed.
    In such cases, you can apply this style to some inner container 
    which actually contain text boxes.
  */
  -webkit-overflow-scrolling: touch;
}

Like this blog ? Share it on your favourite social network.
Search powered by Google

Didn’t find what you were looking for? Try here.

Template Monster

Where you can search over 26K+ Premium Templates.

Now, get flat 10% discount by using “b3fbdxkv49mosrt59dsh0dx29” promo-code.

Email NewsLetter

By subscribing, you’ll get access to latest blogs and other resources. Also, whenever there is any new content addition here, you’ll receive those updates directly to your inbox.

NOTE: I’m a strict antispammer. So you don’t have to worry about spams.

This website is designed by keeping modern browsers in mind. Never mind about legacy browsers. It’s high time we upgrade ourselves.

The website and its contents are created, edited and maintained solely by me (Santosh K Shetty). No one else shall possess any kind of resources unless explicitely mentioned.

Some of the Creative Credit goes to FreePik.

Copyright © from Jun 2014 to May 2018

Table  Of  Contents
On this page,