Hi team,
I’ve created a contact form using gravity forms and have styled it using CSS. I can’t get the placeholder text on the select field to format correctly and look like the other fields. Can you please provide some insight. What I currently have is:
/* Hide required field legend in Gravity Forms */
.gform_wrapper .gform_required_legend {
display: none;
}
/* Change field descriptors color to white in Gravity Forms */
.gform-field-label {
color: #ffffff !important;
font-weight: bold !important;
font-size: 20px !important;
}
.gfield_required {
color: #ffffff !important;
}
/* Remove the box-shadow from text input fields in Gravity Forms */
.gform_wrapper input[type=“text”],
.gform_wrapper input[type=“email”],
.gform_wrapper input[type=“tel”],
.gform_wrapper textarea {
box-shadow: none !important;
border: 1px solid #a8aaac !important;
}
.gform_wrapper select { /* Target drop-down fields */
box-shadow: none !important;
border: 1px solid #a8aaac !important;
}
/* Style the submit button in Gravity Forms /
.gform_wrapper input[type=“submit”] {
background-color: #ffffff !important; / White background color /
color: #4498aa !important; / Text color of the button /
font-weight: bold !important;
font-size: 19px !important;
letter-spacing: .8px !important;
text-shadow: none !important; / Remove text shadow /
border: 2px solid #ffffff !important; / White border /
border-radius: 200px !important; / Adjust the value for a more or less rounded appearance /
padding: 10px 20px !important; / Adjust the padding values as needed */
}
/* Hover effect for the submit button /
.gform_wrapper input[type=“submit”]:hover {
background-color: transparent !important; / Transparent background on hover /
border-color: #ffffff !important; / White border on hover /
color: #ffffff !important; / Text color of the button /
font-weight: bold !important;
font-size: 18px !important;
text-shadow: none !important; / Remove text shadow /
transform: scale(1.04); / Slight growth effect on hover - adjust the scale factor as needed */
}
/* Style input fields in Gravity Forms with a transparent background and bottom border /
.gform_wrapper input[type=“text”],
.gform_wrapper input[type=“tel”],
.gform_wrapper input[type=“email”],
.gform_wrapper textarea,
.gform_wrapper select {
border: none !important; / Remove the default border /
border-bottom: 1px solid #4498aa !important; / Add a bottom border with color #4498aa /
background: transparent !important; / Set background color to transparent /
box-shadow: none !important; / Remove box shadow */
}
/* Style placeholder text in Gravity Forms /
.gform_wrapper input[type=“text”]::placeholder,
.gform_wrapper input[type=“tel”]::placeholder,
.gform_wrapper input[type=“email”]::placeholder,
.gform_wrapper textarea::placeholder,
.gform_wrapper select::placeholder {
color: #4498aa !important; / Change the color to your preferred value /
font-style: italic !important; / Make the text italic */
}
/* Change the text color of the Gravity Forms confirmation message /
.gform_confirmation_message {
color: #ffffff !important; / Change the color to your preferred value */
font-size: 20px !important;
font-weight: bold !important;
}
/* Change the color of the input text in Gravity Forms /
.gform_wrapper input[type=“text”],
.gform_wrapper input[type=“tel”],
.gform_wrapper input[type=“email”],
.gform_wrapper textarea,
.gform_wrapper select {
color: #1e6976 !important; / Change the color to your preferred value */
font-size: 16px !important;
}
But it’s still showing as white with a border around it.
Thanks so much!
Ashley
