关于Gravity Forms

fobwebs

已于 2024-03-24 21:41:43 修改

阅读量294

点赞数 10

文章标签： gravity form gravity forms

于 2024-03-09 13:47:10 首次发布

本文链接：https://blog.youkuaiyun.com/fobweb/article/details/136581970

版权

本文介绍了如何使用GravityForms插件修改各种元素的样式，包括自定义占位符、文件上传按钮、去除NumberField箭头、输入聚焦效果和隐藏表头。提供了详细的CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多样式可以通过下面的插件来修改：

Styles & Layouts for Gravity Forms – Best Gravity Forms Styler, Designer – WordPress plugin | WordPress.org

● 自定义Placeholder 的字体颜色和透明度：

body .gform_wrapper ::placeholder,
body .gform_wrapper ::-webkit-input-placeholder,
body .gform_wrapper input[placeholder] {
  color: blue;
  opacity: 0.8;
}

也可以通过上面的插件来修改实现。

● 改file upload 组件的 Select files 按钮的颜色：

比如改成鼠标移上去前是白底黑框黑字，鼠标移上去时变成黑底黑框白字：

button.gform_button_select_files {
  background-color: #fff!important;
  border: 1px solid #000!important;
  color: #000!important;
}
button.gform_button_select_files:hover {
  background-color: #000!important;
  color: #fff!important;
  border: 1px solid #000!important;
}

● 去掉number field 右边的上下箭头：

/*Remove the Arrows on the Numbers Field*/
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    display: none !important;
}
input[type="number"] {
    -moz-appearance: textfield !important;
}

● 点击field 的时候边框颜色的修改：（change Input glow Border when input is selected）

（上图箭头中的这个是 box-shadow)

/*change Input Border when input is selected*/
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
	border-color: #00a0e9!important;
    box-shadow: none;
}

代码是加边框颜色并去除box shadow 的颜色

● hide form title

body .gform_wrapper h2.gform_title {
    display: none !important;
}

●