タグ

webkitとHTML5に関するsilemのブックマーク (3)

  • Styling Form Controls – WebKit

    Styling Form Controls Using Pseudo Classes WebKit provides a way to give CSS styles to form controls. Some form controls can be styled through pseudo classes. This article will illustrate how we can customize their appearances using the pseudo classes. Note: These pseudo classes are not standardized and we might change the behavior in the future. <progress> By giving "-webkit-appearance: none;", <

    silem
    silem 2013/05/30
    meterタグのスタイリング
  • iOS・Androidのハイライト表示の指定について。

    今回は iOS・Androidのハイライト表示の設定について 紹介します。 (以下 iOS→iOSのMobile Safari、AndroidAndroidの標準ブラウザ) リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。 その色が設定出来るんです。 今回はCSS3を使った方法とjsを使った方法を紹介したいと思います。 iOS・Androidのハイライト表示の設定について まず初めに。 今回CSS3とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはjsを使用するもの、のみになります。 CSS3を使用する方法では、iOSとAndroid別々の方法を紹介しています。 それでは。 CSS3を使ったハイライト表示の指定 まず、CSS3でハイライト表示の設定をするにはこの記述をします。 -webkit-tap-highlight-co

    iOS・Androidのハイライト表示の指定について。
  • search 型 input 要素 のスタイルをリセット - terkel.jp

    HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res

    search 型 input 要素 のスタイルをリセット - terkel.jp
  • 1