All Articles

CSS Styling: Semantic React UI Form Controls


Semantic React!

Let’s take the following Semantic React UI code:

  <Form.Field
    className="no-edit-input-field"
    control={Input}
    label='Variable One'
    value={this.state.variableOne}
    readOnly={true}
  />

Now say we want to style the specific control{Input} field inside the <Form.Field> but we don’t want to affect any of the Input field theming elsewhere on the site.

As <Form.Field> is set to readOnly={true}, we’d like to make the user aware they can’t edit the information inside that field.

Displaying the not-allowed cursor when the user hovers over the field seems like a reasonable approach.

But as we can’t apply a class to the control={Input} directly, how can we get it done?

The answer is actually pretty simple:

div.field.no-edit-input-field > div.ui.input :hover {
  cursor: not-allowed !important;
}

We can use the child combinator > to access the seemingly inaccessible control={Input}

HTML Elements!

The HTML inspector (right-click > inspect) allows us to find out the name of the parent div. Note that we can see the value of our text inside the child <div>.

Selecing div.field.no-edit-input-field allows us to directly access the <Form.Field> in question, using a combination of html selectors and classes. We can then use the child combinator > to instruct CSS to select matching elements that are children of the selected element.

The child element we want to access is a div with the classes ui & input.

The only detail that should be different for you is the className you choose for your styling of the parent element <Form-Field> (e.g no-edit-input-field and the className of the control element given by Semantic (usually matching the name of the element you’ve selected e.g. input or checkbox).

Match those up you’ll now able to style your control elements in Semantic React UI.