Fork
6
Fav
0
View
20945
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 0 lines
  • HTML 26 lines
  • CSS 82 lines
フォーム要素などのブラウザ側でUIが勝手にレンダリングされるものは、
CSS3から登場した"appearance"というプロパティによって自由に装飾できるようになったけれど、
まだ実験段階なので、特定の要素にしか効かなかったり、細かいバグが有ったりとbuggy。

現段階では"-webkit-appearance"または"-moz-appearance"といったベンダプリフィックス付きで提供されてる。
便利な時代になったなぁ。。。

https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

よし、appearanceを"none"に設定してやれば、あとは自由に装飾し放題!と思いきや、
Firefoxだけ、デフォルトのSelect要素の右側に表示される下矢印みたいなのが
残ったままになってしまう。

なんとか消す方法は無いものかと調べた所、

text-indent: .01px;
text-overflow: "";

をつけると、Firefoxの時だけ、うまい具合にコレが消えてくれる事を発見。
https://gist.github.com/joaocunha/6273016

でもこういうハックは後で何が起こるか分からないので、
UAでFirefoxを判定し、htmlタグに"firefox"というクラスを付けてから、
.firefox .uiSelect select {
text-indent: .01px;
text-overflow: "";
}

とやったほうが良いと思われます。
  • select要素をCSSだけで装飾する(Firefox対策込)
  • select要素をCSSだけで装飾する(Firefox対策込)

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

hirotweets

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by