フォームのCSSカスタマイズ
ユーザー会分科会で利用しているフォームのCSSカスタマイズのコードと設定を公開します。
私自身CSSのカスタマイズは素人なりに調べながら行っておりカスタマイズのsampleも少ないので、
CSSカスタマイズされている方いらっしゃればカスタマイズ方法等も頂けたら幸いです。
/* Button*/
.mktoButton {
height: 45px !important;
width: 100% !important;
font-size: 18px !important;
font-weight: normal !important;
}
.mktoButtonRow {
text-align: left !important;
width: 350px !important;
}
@media only screen and (max-width: 480px) {
.mktoButtonRow {
width: 100% !important;
}
}
/* Field Size & Color */
.mktoForm input[type=url],.mktoForm input[type=text],.mktoForm input[type=date],.mktoForm input[type=tel],.mktoForm input[type=email],.mktoForm input[type=number],.mktoForm select.mktoField{
color: #757575;
height: 38px;
border: 1px solid #ccc;
}
/* Textarea Field Size & Color */
.mktoForm textarea.mktoField{
color: #757575;
height: 120px;
border: 1px solid #ccc;
}
/* Asterisk & Label not display*/
.mktoLabel , .mktoAsterix , .mktoOffset , .mktoGutter{
display: none !important;
}
/* Error Popup*/
.mktoError{
left:0px !important;
}
.mktoForm .mktoError .mktoErrorMsg {
box-shadow: none;
text-shadow: none;
background-color: #e57373;
background-image: none;
border: 1px solid #e57373 !important;
}
.mktoErrorArrow {
background-color: #e57373 !important;
border: 1px solid #e57373 !important;
}
/* Error Field boader*/
.mktoForm input.mktoField.mktoInvalid,
.mktoForm textarea.mktoField.mktoInvalid,
.mktoForm select.mktoField.mktoInvalid{
border:1px solid #e57373;
}