Input fields without borders

In this CSS workshop you will learn how to create input text fields without borders and with different styles with which to customize your design.

Form fields allow limited customization, but in the case of text inputs we have plenty of options to alter their styles to suit the desired look for our website. One of the typical problems that we will encounter is removing the ugly borders that the browser puts on us on its own.

Actually we can verify that in many browsers the input fields (type=”text”) already appear without borders by default. But it is really very risky to leave them as is since, if we do not indicate any CSS, it will be the browser itself that implements them according to its default style rules. That is why it is always convenient to define some rules.

Defining additional styles to the text field

However, an input field to which we assign a certain style, such as a background color or a rounded border, you will see that some borders already appear that you may not want there.

For example we have these text fields.

​​

To which we have assigned some classes (CSS class) with the following styles.

.rounded { border-radius: 5px; } .background { background-color: #def; }

Just by placing these styles some browsers will cause text fields to have an ugly border.

Remove borders from inputs

If we want our input fields to look better, we’ll need to remove the borders. This is pretty straightforward, thanks to the CSS “border” attribute. We now have the following text field.

To remove the borders we can use some styles like the one below.

.noborder { border: 0; }

The problem is that we will lose the notion that this is a text field a bit, since since it does not have a border, it may simply look like text on the page, so it will be advisable to add some additional style, such as a background color. .

​​

Our CSS could be something like this.

.noborder { background-color: #eee; border: 0; }

Remove glow border with focus on field

An often unattractive effect occurs when we place the browser’s focus on a text field, causing a halo to appear around it, like a glow to indicate that the field is currently active.

Note: That glow or halo is very useful on a form with multiple INPUT fields, as it helps us visually know where we are located within the form. For usability reasons, we should think twice if we want to remove it, but in other user interfaces, such as a search box, it looks really bad and I don’t consider it necessary.

To remove that glow when the element receives the “focus” of the application is simple, with the CSS attribute “outline”.

We have the following text field:

And now the CSS to remove the glow due to the application focus.

.outline none { outline: none; background-color: #dfe; border: 0; }

Edges avoiding the relief effect

As a bonus, in this article we are going to see how to remove the shading effect from the borders, since sometimes it is interesting that the input fields have a border, but we don’t want it to be as ugly as the default one, in which a relief appears.

We have this text field:

Now the styles, where we’ve basically forced the border thickness to always be 1 pixel and have the same color everywhere on the border.

.roundednonemboss { border-radius: 5px; border: 1px solid #39c; }

Code example with all the INPUT fields used in the article

To finish, we can see the example of all the text fields that we have used as practice in this article.

​​

The running example will produce input fields that look like we can see in this image:

We end up remembering that in .com we have various articles that explain other issues related to .