So entwerfen Sie eine Formularseite mit CSS (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS zum Entwerfen einer Formularseite (mit Beispielen). Ich hoffe, dass er für Freunde hilfreich ist.

In letzter Zeit stoße ich bei Projekten immer auf verschiedene und seltsame Anforderungen. Die Verwendung von UI-Frameworks wie Bootstrap kann die Kundenanforderungen nicht erfüllen. Sie können nur Ihr eigenes Gehirn nutzen und einige Stile selbst schreiben.

• So passen Sie den Eingabestil an (einschließlich Platzhalter-Schriftstil)

/*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;
}

• Formularelementstil ändern

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;
}

• Ebenso können Formularelemente wie Eingabe und Schaltfläche über diese ungewöhnlichen Attribute angepasst werden.

• Wenn Sie in den Formularelementen folgende Effekte erzielen möchten:

使用伪类给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;
}

• Es gibt noch einen weiteren wichtigen Punkt: Wenn Sie bei der Auswahl einen platzhalterähnlichen Effekt erzielen möchten, können Sie die ausgewählte Anzeige deaktivieren:none;

<option>选择单位</option>

---

• Zusammenfassung

Was ich dieses Mal gelöst habe, ist kein schwieriges Problem, aber es dauert eine Weile, also habe ich es aufgeschrieben. Eine gute Erinnerung ist nicht so gut wie ein schlechter Text.
Im Anhang finden Sie die Github-Adresse und hinterlassen die Anmelde- und Registrierungsinformationen, die ich geschrieben habe.

Das obige ist der detaillierte Inhalt vonSo entwerfen Sie eine Formularseite mit CSS (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!