wp contact form 7でのチェックボックス装飾

Wordpress関連
2018年10月16日

ここは随分手間取ってしまった。
擬似要素とwpcf7の出力関係、隣接クラスに当てるcssなど、時なくwpcf7吐き出すタグに合わせなくてはならないので苦労した。
最終的に当てたcssは以下

/* checkbox　*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 select option,
.checkbox input[type=checkbox] + span.wpcf7-list-item-label:before {
	width: 200px;
	height: 25px;
  	font-size: 90%;
  	color: #2F2F2F;
  	border: 1px solid #CCC;
  	background-color: #E9E9E9;
  	display: inline-block;
	}
.wpcf7 input[type="number"] {
	width: 45px;
	height: 20px;
	font-size: 90%;
}
 .wpcf7 textarea {
 	margin-top: 5px;
	width: 100%;
	height:160px;
	color: #2F2F2F;
	font-size: 90%;    
	background-color: #E9E9E9;
	border: 1px solid #CCC;
	filter:　Alpha(opacity=70,enabled=70);
 }
/* checkbox */
 
.checkbox input[type="checkbox"],
.corporation input[type="checkbox"],
.personal input[type="checkbox"],
.organization input[type="checkbox"],
.special_support input[type="checkbox"],
.support input[type="checkbox"],
.enroll-confirm input[type="checkbox"]
 {
    display: none;
}
 
.checkbox_margin{
	margin-top: 4px;
	margin-bottom: 4px;
}
  
/* checkbox - unchecked */
.wpcf7 input[type="checkbox"] + span.wpcf7-list-item-label::before
 {
	display: inline-block;
	content: "";
	position: relative;
	top: 3px;
	width: 15px;
	height: 15px;
	border: 1px solid #CCC;
	background-color: #E9E9E9;
	margin-right: 10px;
}
 
/* checkbox- checked */
.wpcf7 input[type="checkbox"]:checked + span.wpcf7-list-item-label::after
 {
	content: "";
  	display: block;
  	position: absolute;
  	top: -3px;
  	left: 6px;
  	width: 7px;
  	height: 14px;
  	transform: rotate(40deg);
  	border-bottom: 3px solid #9A0000;
  	border-right: 3px solid #9A0000;
}
/*  checkbox位置調整　*/
span.wpcf7-list-item {
	margin: 0;
}
/*checkbox - title */ 
.checkbox .wpcf7-form-control-wrap{
	margin-left: 14px;
	font-size: 1rem;
	font-weight: 400; /* Regular */
}
/*  wpcf response　*/
div.wpcf7-response-output {
	margin: 20px auto;
	width: 60vw;
	border: 1px solid #9A0000;
	background-color: #E5E5E5;
}
div.wpcf7-mail-sent-ok {
    border: 1px solid #0DEC93;
}
div.wpcf7-mail-sent-ng {
    border: 1px solid #ff0000;
    background-color: #E5E5E5;
}
.form-box input.text
	{
	width: 100%;
	height: 25px;
	font-size: 90%;
	color: #2F2F2F;
	border: 1px solid #CCC;
	background-color: #E9E9E9; 
	display: inline-block;
	}
input.btn
	{
	color: #ccc;
	background-color: #1B6DB2;
	}
input
	{
	background-color: #E9E9E9;
	}
.form-box .checkbox, .radio
	{
	position: relative;
	top: 4px;
	width: 20px;
	height: 25px;
	background-color:#CCC;
	}

checkboxに隣接する要素はspan.wpcf7-list-item-labelなのでここに擬似要素を当てたわけだが、wpcf7のフォームを作るときに「承諾確認」ボタンを使用するとspan.wpcf7-list-item-labelが出力されないので擬似要素は効かない。
そこで通常の「テキスト」を使った。

PAGE TOP