w3resource

HTML-CSS: Input with prefix

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.


What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.