scss フォームのスタイル

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss フォームのスタイル相关的知识,希望对你有一定的参考价值。

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
	/* cancel */
	border-radius: 0;
	-webkit-appearance: none;
	/* custom */
	font-size: 16px;
	border: 1px solid #ddd;
	box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.12);
	padding: 7px .5em 8px;
	.is-confirm & {
		border: none;
		background: none!important;
		box-shadow: none;
	}	
}
input:-webkit-autofill {
	&.wpcf7c-conf {
		.is-confirm & {
			box-shadow: 0 0 0px 1000px #fff inset;
		}
	}
}
.btn > input {
    /* cancel */
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
    /* custom */
    display: inline-block;
    width: 221px;
    height: 57px;
    cursor: pointer;
    background-image: url(/cms/wp-content/themes/eitai/img/inquiry/btn01.gif);
    background-position: -120px 0;
    background-repeat: no-repeat;
    &:hover {
        opacity: .7;
    }
    &#back {
        background-image: url(/cms/wp-content/themes/eitai/img/inquiry/btn_back01.png);
        display: inline-block;
        margin-right: 10px;
    }
    #submit {
        background-image: url(/cms/wp-content/themes/eitai/img/inquiry/btn_submit01.png);
    }
}
.wpcf7-list-item input[type="radio"] { 
	margin:0 3px 0 0;
	vertical-align: middle;
}
.wpcf7-list-item-label {
	vertical-align: middle;
}
.wpcf7-list-item { 
	margin-left: 0;
	min-width: 180px;
	display: inline-block;
}

以上是关于scss フォームのスタイル的主要内容,如果未能解决你的问题,请参考以下文章

css OOCSSのためのスタイルルール集。

scss 选择框简易スタイル(IE9以下はデフォルト)

php TinyMCE的のスタイルをカスタマイズ

html CSS特定の要素のみにスタイルシートを适用する

和食とアートをスタイリッシュに楽しむHIVE 06 ART

markdown スタイルとか