Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Custom select dropdown using CSS

Posted in CSS

We can create customize default HTML select dropdown using CSS. We can either customize this using JS. Refer Create Custom Dropdown using jQuery article to create custom dropdown using JavaScript.

Use CSS below:

<style>
	
  select.custom-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    /* border: 0 !important; */
    /* background-color: #0d98e8; */
    color: #333;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 14px;
    padding: 10px;
    width: 245px;
    cursor: pointer;
    background: url(drop-down-arrow.png) no-repeat right center;
    background-size: 40px 37px;
    border: 1px solid #CCC;
    background-position: 206px 0;

 }
  select::-ms-expand {
    display: none;
 }
</style>

Use above CSS to customize select dropdown. This CSS is compatible with all browsers including IE 10+, FF, Chrome and MAC Safari.

Download Code

Demo:

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Browser hacks using CSS

Posted in CSS, CSS Interview Questions

With reference to my previous post Browser detection using Jquery javascript we can apply browser specific CSS to HTML elements.

Use CSS hacks below.

Chrome:

    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
        .header{
          width: 230px;
        }
    }

Safari:

     @media screen and (-webkit-min-device-pixel-ratio:0) {
        .header{
          width: 230px;
        }
     }
                     OR

     @media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
        .header{
           width: 230px;
        }
      }

Firefox:

     @-moz-document url-prefix() {
        .header{
          width: 230px;
        }
     }

IE10 & IE11:


      @media all and (-ms-high-contrast:none)
       {
           .header { color: green } /* IE10 */
           *::-ms-backdrop, . header { color: red } /* IE11 */
       }

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Rotate div at Corner CSS 3 transform

Posted in CSS, CSS Interview Questions

CSS 3 rotate() transform property rotate’s div consider axis of rotation at center. See below example.

Example:

<style>
   .demo { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo'></div>

In above example, we have used keyframe animation with rotate transform. Div is rotating with axis of rotation at center. To rotate div at one of the corner like clock’s hand, use transform-origin property of CSS 3. This property shift’s axis of rotation at corner depends on what value we are giving. This will shifts axis of rotation to right side of div. See below example.

Example:

<style>
   .demo { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
    transform-origin:100% 100%;
   -webkit-transform-origin:100% 100%;
   -ms-transform-origin:100% 100%;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo'></div>

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Object tag z-index not working in IE

Posted in CSS, CSS Interview Questions, Html

If you are playing any flash/brightcove video using object tag and you want to show custom play button or image on video you can use z-index property to adjust play button position. This works fine in chrome and Mozilla except internet explorer. In IE object tag won’t take any css property. See below example

<object type=”video/quicktime” data=”http://localhost/videos/qtmovie.mov” width=”340″ height=”280″>
<param name=”controller” value=”true” />
<param name=”autoplay” value=”false” />
<param name=”wmode” value=”transparent” />
</object>

By default, wmode property is set to “transparent” to apply z-index or any css property set wmode property to “opaque”

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.