HTML-CSS: Input with prefix

Last update on March 08 2024 13:34:58 (UTC/GMT +8 hours)

HTML-CSS : Exercise-18 with Solution

Using HTML, CSS creates an input with a visual, non-editable prefix.

Use display: flex to create a container element.
Remove the border and outline from the <input> field. Apply them to the parent element instead to make it look like an input box.
Use the :focus-within pseudo-class selector to style the parent element accordingly, when the user interacts with the <input> field.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS creates an input with a visual, non-editable prefix.</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="input-box"><!-- Comment: Defines a container for the input and prefix -->
<span class="prefix">+20</span><!-- Comment: Defines a non-editable prefix -->
<input type="tel" placeholder="254 254 1111"/><!-- Comment: Defines an input field for telephone numbers -->
</div><!-- Comment: End of the input box -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple web page with an input field and a non-editable prefix displayed before the input field.

The prefix is defined using a <span> element with the class "prefix".

The input field is defined using the <input> element with the type "tel" (telephone number) and a placeholder text "254 254 1111".

The meta tags in the <head> section provide metadata about the document, such as character encoding and viewport settings.

The doctype declaration <!DOCTYPE html> specifies that the document is an HTML5 document.

The title tag <title> sets the title of the web page displayed in the browser tab or title bar.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */ .input-box { display: flex; /* Comment: Displays the container as a flex container */ align-items: center; /* Comment: Aligns items along the cross axis (vertically centered) */ max-width: 300px; /* Comment: Sets the maximum width of the container */ background: #CCC; /* Comment: Sets the background color of the container */ border: 1px solid #a0a0a0; /* Comment: Sets the border of the container */ border-radius: 4px; /* Comment: Sets the border radius to create rounded corners */ padding-left: 0.5rem; /* Comment: Adds left padding to the container */ overflow: hidden; /* Comment: Hides any content that overflows the container */ font-family: sans-serif; /* Comment: Sets the font family for the text inside the container */ } .input-box .prefix { font-weight: 300; /* Comment: Sets the font weight of the prefix text */ font-size: 14px; /* Comment: Sets the font size of the prefix text */ color: #999; /* Comment: Sets the color of the prefix text */ } .input-box input { flex-grow: 1; /* Comment: Allows the input field to grow to fill remaining space */ font-size: 14px; /* Comment: Sets the font size of the input text */ background: #fff; /* Comment: Sets the background color of the input field */ border: none; /* Comment: Removes the border of the input field */ outline: none; /* Comment: Removes the outline when input field is focused */ padding: 0.5rem; /* Comment: Adds padding to the input field */ } .input-box:focus-within { border-color: #777; /* Comment: Changes the border color when the container or its children are focused */ } </style> /* Comment: End of the CSS styling */

Explanation:

This CSS code styles the HTML elements defined in the previous code snippet.

.input-box class styles the container div for the input and prefix.

.prefix class styles the prefix text within the container.

input styles are applied to the input field within the container.

flex properties are used to create a flexible layout.

Various other properties like background, border, font-size, padding, etc., are used for styling and improving the appearance of the elements.

:focus-within pseudo-class changes the border color when the container or its children are focused.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.