コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでフォームスタイルをクリアする方法の例

CSSでフォームスタイルをクリアする方法の例

黄舟
リリース： 2018-05-26 15:39:04
オリジナル
3566 人が閲覧しました

開発プロジェクトでフォームによく使用されるクリア スタイル:

1. プレースホルダーのデフォルトのフォントの色を変更します 

::-webkit-input-placeholder{color: #333;}
:-moz-placeholder{color: #333;}
:-moz-placeholder{color: #333;} 
:-ms-input-placeholder{color: #333;}
ログイン後にコピー

2. 入力番号の上矢印と下矢印をキャンセルします

input::-webkit-outer-spin-button,input
::-webkit-inner-spin-button{-webkit-appearance: none !important;}input[type="number"]{-moz-appearance:textfield;}
ログイン後にコピー

3. オプションのテキストを右揃えにします。ドロップダウン選択ボックスの選択

direction: rtl;
ログイン後にコピー

4. 右側の矢印非表示を選択します

-webkit-appearance: none;
ログイン後にコピー

6. テキストエリアのテキストボックスの高さ調整

resize:none;
ログイン後にコピー

のコードここでは JQ を参照する必要があり、構造内の最も外側の .ta_box はユーザー エクスペリエンスを最適化するためにスライディング ブロックを排除するためのものです。

ここでは JQ の拡張機能が使用されています

以上がCSSでフォームスタイルをクリアする方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css form
ソース：php.cn
前の記事：CSS 属性を使用してさまざまな中央揃えメソッドを実装する方法の詳細なコード説明 次の記事：CSS の両端の位置合わせを実現する 3 つの方法の分析例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Ajax と PHP を使用して CodeIgniter に複数の画像ファイルをアップロードする 複数の画像ファイルをサーバー側にアップロードするのに問題があります。誰かがコードのどこが間違っているのかを指摘してくれると助かります。最初は HTML コードがあります: <...
から 2024-04-03 22:35:03
0
1
318
PHP フォームに送信ボタンが正しく掲載されない 申請フォームを作成しているのですが、フォームが機能しません。送信ボタンをクリックしても、変数を送信するための if ステートメントは実行されません。私のフォームタグは次のようになり...
から 2024-04-03 12:46:54
0
1
379
ブートストラップを使用した無線要素の分離: ステップバイステップ ガイド 何千もの方法を試しましたが、これに適したスタイルやスペースを見つけることができません。ブートストラップを使用する必要があります。このように見えるようにする必要がありますが、私のコー...
から 2024-04-03 09:41:55
0
1
401
onSubmit を使用して React から Node js にデータを送信する React スクリプトには onSubmit があり、送信ボタンをクリックすると呼び出されます。 consthandleSubmit=(event)=>{event.prev...
から 2024-04-02 16:36:07
0
1
268
ページが必要なサイズより大きい問題; React.js 現在のページは次のようになります。 ご覧のとおり、上部には多くの空白があります。この空白を消す方法がわかりません。これは HTML です: <divclassName=&qu...
から 2024-04-02 14:48:30
0
1
283
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート