タグ

2015年3月13日のブックマーク (3件)

  • 【HTML】IE10のinput要素のxボタンを消す at softelメモ

    問題 IE10になって、フォームのテキスト入力欄に「×」ボタンや、パスワード入力欄に目のマークが出るようになったんだけど、これ消せますか。 答え CSSで消せる(-msプレフィックス付き)。 「×」マーク(クリアボタン)は、::-ms-clear 擬似要素で。 input::-ms-clear { visibility:hidden } 目のマーク(パスワード表示ボタン)は、::-ms-reveal 擬似要素で。 input::-ms-reveal { visibility:hidden }

    【HTML】IE10のinput要素のxボタンを消す at softelメモ
    torimoku
    torimoku 2015/03/13
    IEの”×”アイコンの消し方、目のアイコンの消し方も有ります
  • InternetExplorerでinputにつく×は::-ms-clearでスタイル適用

    InternetExplorer10以上で、1行テキストボックスのinput type=”text”へ文字を入力する表示されるようになった×ボタン。 これを押すと、入力されている内容をクリアできるのですが お客さんから、違和感があるから消してほしいと要望があったり テキストボックスの枠を大きめにすると、×が大きく表示されすぎて目立ちすぎたりと 初期設定のままでは何かと使いにくい場面の多い機能です。 このクリアボタンは、::-ms-clearの擬似要素でcss制御できます。 ※InternetExplorer10以上でご覧ください。 試してみたところ。:hoverも組み合わせられました。 <div class="sample"> <input type="text"> </div> <div class="sample"> <input type="text" class="custom">

    InternetExplorerでinputにつく×は::-ms-clearでスタイル適用
    torimoku
    torimoku 2015/03/13
    IEの”×”アイコンの消し方
  • 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
    torimoku
    torimoku 2015/03/13
    safariの検索スタイル変更方法。特に、左のスペースを何とかしたい時