将图标添加到表单输入

要获得上述效果,请在表单编辑器上选择“内部标签”。要添加图标,请在页面上添加以下javascript:

  

s
<script type='text/javascript'>
 $(function(){
$(".activedemand input[type=email]").parent().addClass("email-input");
$(".activedemand input.tel").parent().addClass("phone-input");
$(".activedemand input[id^='form_1_']").parent().addClass("name-input");
$(".activedemand input[id^='form_11_']").parent().addClass("name-input");
$(".activedemand input[id^='form_121_']").parent().addClass("address-input");
$(".activedemand input[id^='form_101_']").parent().addClass("city-input");
$(".activedemand input[id^='form_131_']").parent().addClass("postal-input");
});
</script>

  

 

然后在页面的CSS块中添加:

 

的CSS
form.activedemand div.form_input.name-input input,
form.activedemand div.form_input.phone-input input,
form.activedemand div.form_input.email-input input,
form.activedemand div.form_input.address-input input,
form.activedemand div.form_input.postal-input input,
form.activedemand div.form_input.city-input input {
  padding-left: 25px !important;
}

form.activedemand div.form_input:before {
  content: "";
  font-family: 'FontAwesome';
  position: absolute;
  margin: 5px 7px;
  color: rgba(0, 0, 0, 0.2);
}

form.activedemand div.form_input.name-input:before {
  content: "\f007";
}

form.activedemand div.form_input.phone-input:before {
  content: "\f095";
}

form.activedemand div.form_input.email-input:before {
  content: "\f003";
}
form.activedemand div.form_input.address-input:before {
  content: "\f1ad";
}

form.activedemand div.form_input.city-input:before {
  content: "\f1ad";
}
form.activedemand div.form_input.postal-input:before {
  content: "\f1ad";
}

 

 

本文是否有帮助?
0之0认为有帮助

评论

0评论

登入 发表评论。