2017-11-23 29 views
3

firefoxを更新して以来、firefoxのUIコントロールの一部として小さなx(x)ボタンが入力に表示されるようになりました。Firefox Quantum(57)<input type = "date"> UI閉じる/削除ボタン非表示

CSSを使用してこれらのボタンを非表示/削除する方法はありますか?

あなたがここにモジラのFirefoxの入力日付Webページ上でこれを見ることができます: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

またはビュー画像 here

+0

格安ショットは、カスタム日付ピッカー(目を使用しています多くのlibs/snippetsがあります)、あるいはより安いものは要素をテキスト入力に設定することですが、プレースホルダには正しい日付形式を入れてユーザーがそれを取得します。理想的ではありませんが、これらのものは入力要素に埋め込まれており、取り除くためには難しいAFと思われます。これまではWebkitセレクタをいくつか使用していましたが、私はもはや動作しませんでした。小さい要素のためにそれ以来最大にanoyingそれはスペースの半分を取る – DanteTheSmith

+0

感謝@DanteTheSmith私はこれをするために強制されるかもしれない他の答えがない場合でも、素晴らしいではないだろう:) – HKG

+0

あなた自身の質問に答えること自由に感じなさい他の誰よりも先に解決策を見つける。私は、うまくいけば、誰かがこれをよりスムーズに行う方法を知っているだろうという疑問を浮かべました。しかし、私はソリューションの保守性を恐れているので、私はカスタムdatepickersと一緒に行くのです。 – DanteTheSmith

答えて

1

クリップパスは、あなたがそれを使用することができ、粗アプローチであることは動作します:

input[type=date] { 
    border: 0; 
    clip-path: inset(0 17px 0 0); 
    width: 120px 
} 

https://jsfiddle.net/21zwe8yu/

+0

これはうまく動作し、あなたが言う通りです。 あなたが読んでいる人のためのFYIは、それがクロームとホバーのスタイルでうまく動作しないので、FirefoxブラウザをターゲットとしてJを使用する必要があるかもしれません。 入力内の要素と競合するので、これを答えとして置くことには消極的です。 – HKG

+1

ええ、私は同意します。これは私が来ることができる最高のものです。そして、私がこの問題に遭遇したときに、最終的にはこのソリューションを自分で使用することはありませんでした。私はちょうどあきらめて、私のカスタムJSベースのクリアフィールドから日付入力を除外しました。これは、他の入力に適用して、日付入力用にネイティブの入力を優先しました。それにもかかわらず、私は、私が思ったよりも完全にカスタム入力フィールドを作っているウサギの穴を深く掘り下げることに興味がある人もいると思っていました。同様に投稿する。 – kethinov

関連する問題