Loading...

Form Fields

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article applies to CS-Cart versions:
  • 3.0.x

All modifications are performed via the My Changes add-on

By default form fields look like this:

Create the selector:

1
input[type="text"], input type=["password"] {}

Use the following selectors to modify different aspects of the form field appearance:

Font height and size

1
2
height: 48px;
font-size: 48px;

 

Border color

1
border-color: #000; // color in RGB format

 

Border width

Border width can be defined in any valid units.

1
border-width: 4px;

 

Border style

Not all border styles are cross-browser supported, so we recommend to use only the 3 basic ones below:

1
border-style: solid;

 

1
border-style: dashed;

 

1
border-style: dotted;

 

Background

The instructions are similar to the ones described in the Store background section. Pay attention on text readability: avoid having white letter on white background. In order to change text color use the parameter:

1
color: #cecece;

 

Rounding radius

The default value for the rounding radius is 3 pixels (3px). Change it by modifying the parameter:

1
border-radius: 10px;

You can achieve interesting output by setting this value to half field height:

Even more interesting result can be achieved by setting the rounding radius for all 4 corners separately:

1
border-radius: 56px 113px 56px 113px;
Keep in mind the input text indent. Change the parameter padding-left to adjust the left side text indent.
This property is not supported in Internet Explorer 8 and lower, be careful.

Shadows

It is possible to set up both inner:

and outer shadows:

Read more about the property box-shadow.

This property is not supported in Internet Explorer 8 and lower, be careful.

When the cursor is placed in the field it is assigned with the pseudo-class focus, and the parameters for it should be defined in the selector:

1
input[type="text"]:focus, input[type="password"]:focus

All the described modifications of string input fields can be applied to text fields and selectboxes as well. In these cases the necessary properties should be stored in the selectors textarea {} and selectbox {} accordingly. Checkboxes and radio buttons can not be customized this way.

Once you start customizing the appearance of your store the responsibility is yours. Remember that incorrectly defined parameters can result in an unusable design. Be careful and make back ups.