How to create an HTML element with a visual non-editable prefix

Overview

In this shot, we'll create an HTML element with a visual non-editable prefix.

Example

In the example below, we'll create an HTML element with a visual and non-editable prefix country code. And an input element that will accept the phone number. Let's look at the code below:

Explanation

In the HTML tab,

• Line 5: We create a form element.
• Line 6: We create a div with class = "content".
• Line 7: We create a span element with class = "prefix".
• Line 8: We create an input element of type tel.

In the CSS tab,

• We add the necessary style to the elements.

Output

The output shows an HTML element with a visual non-editable prefix (country code) and an input element that accepts the phone number.