CSS を使用してフォーム ページをデザインする方法 (例あり)

この記事の内容は、CSS を使用してフォーム ページをデザインする方法に関するものです (サンプル付き)。必要な方は参考にしていただければ幸いです。

最近、プロジェクトをやっていると、いつもさまざまな奇妙な要求に遭遇します。ブートストラップなどの UI フレームワークを使用すると、顧客のニーズに応えることができません。自分の頭を使って、いくつかのスタイルを自分で書くことしかできません。

• #入力スタイルを調整する方法 (プレースホルダー フォント スタイルを含む)

/*placeholder字体颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-align: center;
    color:RGB(154,171,180);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-align: center;
    color:RGB(154,171,180);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-align: center;
    color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-align: center;
    color:RGB(154,171,180) !important;
}

• フォーム項目のスタイルを変更する

select{
 /*清除select的边框样式*/
    border: none;
 /*清除select聚焦时候的边框颜色*/
    outline: none;
 /*隐藏select的下拉图标*/
    appearance: none;
 /*通过padding-left的值让文字居中*/
    padding-left: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 370px;
    line-height: 41px;
    height: 41px;
    border-radius: 20px;
    border:1px solid rgba(185,198,203,.5);
    box-shadow: 0 0 2px #ccc;
}

• 同様に、入力やボタンなどのフォーム項目は、これらの珍しい属性を通じて調整できます。

• フォーム項目で次の効果​​を実現したい場合:

使用伪类给select添加自己想用的图标
p:after{
    content: "";
    width: 14px;
    height: 8px;
    background: url(img/xiala.png) no-repeat center;
    //通过定位将图标放在合适的位置
    position: absolute;
    right: 20px;
    top: 45%;
    //给自定义的图标实现点击下来功能
    pointer-events: none;
}

• もう 1 つ重要な点があります。選択でプレースホルダーのような効果を実現したい場合は、selecteddisplay:none;

<option>选择单位</option>

を設定できます。

---

• まとめ

今回の解決策は難しい問題ではありませんが、少し時間がかかるのでメモしてみました。悪い文章ほど良くはありません。

添付の
github アドレス に、私が書いたログイン情報と登録情報を残してください。

以上がCSS を使用してフォーム ページをデザインする方法 (例あり)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。