-webkit-appearanceでフォーム要素のスタイルをリセット
<img src="http://webdev.jp.net/wp-content/uploads/2013/08/webkit-appearance-defaurt-reset wikipedia reference.png” alt=”-webkit-appearanceを設定してみた” width=”400″ height=”400″ class=”aligncenter size-full wp-image-1412″ /> スマートフォンのデフォルトブラウザ、Safariのフォーム要素に、スタイルシートで独自のデザインを設定しようとしたとき 角丸やグラデーション、ドロップシャドウなどの初期スタイルを打ち消すのに、意外と手こずったことはありませんか？ -webkit-appearanceをつかうと、これらの装飾を一部外せるので、フォーム要素をすべてオリジナルの装飾にするスマホサイト
search 型 input 要素 のスタイルをリセット - terkel.jp
HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基本的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res
スタイルシートで文字列を省略し、・・・を付ける方法
Webで使えるテクニック！Webで困ったときのメモ帳より、CSSだけで文字列を省略して「・・・」を付けて表示する方法というのがありました。 http://ameblo.jp/linking/entry-10268808742.html そして、その元記事はこちら FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20378240-2,00.htm 要は、 text-overflow: ellipsis; を使うのだが、文字数ではなく、幅で指定できるので、これは使えそうなテクニックだ。 と思ったのだが、 ・・・ Firefox や Chrome は？ 上記ページにあったサンプルをつかって、実際の表示を確認したところ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
