Create Stylish Input Box with Prefix

Introduction

In this lab, we will be creating an input box with a visual, non-editable prefix. By using CSS and HTML, we will create a container element with a prefix and an input field. We will also use the :focus-within pseudo-class selector to style the parent element accordingly, providing a better user experience when interacting with the input field.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("`Mobile First Design`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35221{{"`Input with Prefix`"}} css/colors -.-> lab-35221{{"`Input with Prefix`"}} css/fonts -.-> lab-35221{{"`Input with Prefix`"}} css/margin_and_padding -.-> lab-35221{{"`Input with Prefix`"}} css/borders -.-> lab-35221{{"`Input with Prefix`"}} css/width_and_height -.-> lab-35221{{"`Input with Prefix`"}} css/display_property -.-> lab-35221{{"`Input with Prefix`"}} css/flexbox -.-> lab-35221{{"`Input with Prefix`"}} css/backgrounds -.-> lab-35221{{"`Input with Prefix`"}} css/mobile_first_design -.-> lab-35221{{"`Input with Prefix`"}} css/pseudo_classes -.-> lab-35221{{"`Input with Prefix`"}} end

Input With Prefix

index.html and style.css have already been provided in the VM.

To create an input with a visual, non-editable prefix, follow these steps:

Use display: flex to create a container element with the class .input-box.
Remove the border and outline from the <input> field and 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.

Here is the HTML code:

<div class="input-box">
  <span class="prefix">+30</span>
  <input type="tel" placeholder="210 123 4567" />
</div>

And here is the CSS code:

.input-box {
  display: flex;
  align-items: center;
  max-width: 300px;
  background: #fff;
  border: 1px solid #a0a0a0;
  border-radius: 4px;
  padding-left: 0.5rem;
  overflow: hidden;
  font-family: sans-serif;
}

.input-box .prefix {
  font-weight: 300;
  font-size: 14px;
  color: #999;
}

.input-box input {
  flex-grow: 1;
  font-size: 14px;
  background: #fff;
  border: none;
  outline: none;
  padding: 0.5rem;
}

.input-box:focus-within {
  border-color: #777;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Input With Prefix lab. You can practice more labs in LabEx to improve your skills.

Input with Prefix

Introduction

Skills Graph

Input With Prefix

Summary

Other CSS Tutorials you may like