2

Hi i'm solving a problem to make select box look the same in all browsers (Chrome, Safari, Firefox, Opera, IE) on all platforms. At present my Select box is working same in Firefox and Chrome But when i switch to Opera and IE. It behaves different from Firefox or Chrome. I haven't tried it on Safari yet. How i can do that ??

One more thing i would like to know is "Is it possible to make option tag look same in all browsers as they appear in Firefox in current fiddle ??" So far what i have studied is that it is not possible it is possible with UL LI only.

HTML

<label>
  <select>
    <option value="">Choose Category</option>
    <option value="">Category1</option>
    <option value="">Category2</option>
    <option value="">Category3</option>
  </select>
</label>

CSS

select{
    margin: 0;
    background: #fff;
    color:#333;
    border:1px solid #ccc;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
  width:40%;
  padding:0 5px;
  height:36px;
  -webkit-padding-before:8px;
  -webkit-padding-after:8px;
  font-size:14px;
  cursor:pointer;
}

select option{
    padding:8px 5px;
}


label {position:relative}
label:after {
    content:'<>';
    font:14px "Consolas", monospace;
    color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:0px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#fff;
    position:absolute;
    pointer-events:none;
    display:block;
}

Fiddle: https://jsfiddle.net/6cf3Lfy6/

Note: I am testing it on Opera 12.12 and IE 11.0 and My Firefox and Chrome are up to date.

Ashish
  • 303
  • 5
  • 22
  • You can't unless you use a customised one like `select2` etc. It is because of different browsers have different default settings for rendering elements. – Jai Jan 10 '17 at 08:30
  • I think you are missing -o- support in your css for opera http://www.opera.com/docs/specs/presto27/css/o-vendor/ – codenut Jan 10 '17 at 08:32
  • @codenut I tried but not working... – Ashish Jan 10 '17 at 08:39

2 Answers2

0

All i reached is this far :

see here

padding:0px 5px 2px;
-o-transform:rotate(90deg);

enter image description here

still need to find way to increase padding in opera or top value

I have found a link i think i will be helpful if you once go through it

How to make CSS visible only for Opera

and this too

Select removing dropdown arrow

Community
  • 1
  • 1
codenut
  • 683
  • 1
  • 7
  • 21
-1

just try this, it should work https://github.com/necolas/normalize.css

shixukai
  • 1,805
  • 1
  • 9
  • 8