The ClickDimensions web content editors allow users to make a number of stylistic changes, such as changing the field layout, font colors, font type, etc. However, adding CSS to your record allows for many more styling options in addition to what is provided out-of-the-box. The following example CSS can be added to your form in the code editor in order to modify your record’s style. In this post we will look at how you can modify the hover and focus states of form fields on a form web content record. For more general styling examples, see this previous post.
Change the Properties of the Form Field Hover State
The hover state refers to the properties of the form field when you mouse over it. Modifying the hover properties can be useful because it easily allows you to convey to a person that whatever their mouse is over can be interacted with or is something they should pay attention to. In this scenario, two changes are being made when the field is moused over: the background color changes to green and a shadow is added around the field.
.clickdform input[type=’text’]:hover,
.clickdform textarea:hover,
.clickdform select:hover
{
background: rgba(0,200,0,0.3);
box-shadow: 0px 0px 12px rgba(0,200,0,0.8);
}
You may notice that the background property in this example is different from what was used in previous examples. Previously, only rgb was used to define the color. The represents the amount of red, green, and blue used to generate the color (each value on a scale of 0 to 255). In this example, rgba represents the same thing, except the “a” value represents the opacity of the color, where values closer to 0 are more transparent and values close to 1 are more opaque. For the box-shadow property, there are four parameters. The first two, which are set to 0 in this example, control the position of the shadow. Giving the first parameter a negative value moves the shadow to the left of the field, and a positive value moves it to the right. Likewise, giving the second parameter a negative value moves the shadow above the field and giving it a positive value moves it below the field. The third parameter controls the spread of the shadow, where a lower value results in a more condensed shadow, and the final parameter controls the color.
Change the Properties of the Form Field Focus State
The focus state refers to the properties of the form field when the field has been clicked on and is actively being edited. Modifying this state can help with readability of the form since it allows the user to easily pinpoint which part of the form is currently being modified. In this example, the field will gain a thicker green border. The background is also being set to “none” to cancel out the background change in the hover state if the user is selecting the field and hovering over it at the same time.
.clickdform input[type=’text’]:focus,
.clickdform textarea:focus,
.clickdform select:focus
{
border:2px solid rgb(0,200,0) !important;
background: none !important;
}
Both of the attributes used here include !important because both border and background attributes had already been specified for the field in their normal state and hover state styling, so the !important indicates that this style should take precedence over those that were already defined.
Happy Marketing!
Written by Rhys Saraceni, Marketing Success Manager Team Lead
Powered by WPeMatico