Building a unique mobile number input box with country code in HTML

Struggling to design a unique mobile input box that separates the mobile number and country code with a divider. Need some assistance in creating this custom input field.

Design

https://i.sstatic.net/M0Wvs.png

Current Implementation

          
<div class="col-md-6">
    <p>Mobile</p>
    <div class="form-group mt-2">
        <input type="text" class="form-control" id="ec-mobile-number" aria-describedby="emailHelp"
                              placeholder="91257888" />
    </div>
</div>

Any kind soul out there who can lend a hand? Your help would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

Check out this quick 5-minute solution tailored just for you, feel free to add your personal touch ;)

.form-group {
  border: 1px solid #ced4da;
  padding: 5px;
  border-radius: 6px;
  width: auto;
}
.form-group:focus {
  color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
.form-group input {
  display: inline-block;
  width: auto;
  border: none;
}
.form-group input:focus {
  box-shadow: none;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6d6b7869592c37293729347b7c6d782a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-2">
  <div class="col-md-6">
    <p>Mobile</p>
    <div class="form-group mt-2 d-inline-block">
        <span class="border-end country-code px-2">+60</span>
        <input type="text" class="form-control" id="ec-mobile-number" aria-describedby="emailHelp" placeholder="91257888" />
    </div>
</div>
</div>

Answer №2

Implement Bootstrap for a phone input field:

   <div class="input-group">
     <span class="input-group-text">+65</span>
     <input type="text" aria-label="phone" class="form-control">
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scrolling without limits - cylindrical webpage (CSS/JS)

Is it possible to create a page that infinitely scrolls from top to top without going straight back to the top, but instead showing the bottom content below after reaching it? Imagine being able to scroll up and see the bottom above the top like a 3D cylin ...

javascripthtmlcssscrollinfinite

Looking for guidance and bug assistance in HTML and JS, possibly involving PHP and MySQL. Can anyone offer advice?

I'm attempting to create an auto-complete feature for a forum (similar to the tags below) that will function within LimeSurvey. I am fairly new to this, so please provide explanations as if you were explaining it to a 5-year-old :) My objectives are: ...

phpjavascripthtmlmysql

Implement jQuery to close multiple div elements

My dilemma involves a series of divs with different manufacturer IDs listed as follows: manufacturer[1], manufacturer[2], manufacturer[3], ... etc ... In attempting to create a JavaScript for loop to hide each div, I discovered that it was not achievab ...

javascriptjqueryhtmlcss

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

javascriptjqueryhtmlcssradio-button

Guide to implementing a universal animated background with Angular components

I'm having trouble figuring out why, but every time I attempt to use a specific code (for example: https://codepen.io/plavookac/pen/QMwObb), when applying it to my index.html file (the main one), it ends up displaying on top of my content and makes ev ...

cssangular

Can you show me how to extract the html code from a website using python's requests module?

Attempting to retrieve an HTML file from the specified website: Inspecting the source in Google Chrome allows me to obtain the HTML without any difficulty. However, I aim to download multiple pages using Python requests. Unfortunately, when attempting to ...

pythonhtmlweb-scrapingpython-requests

Is it possible to execute the Go compiler within a web browser?

Just discovered that Go can be compiled to WebAssembly. How awesome! According to this Go documentation, the Go toolchain is actually written in Go itself. This got me thinking, is it possible to run the Go compiler in a browser? Can I create a website w ...

htmlgowebassembly

Achieve smooth scaling of font size in CSS according to body width without the need for JavaScript

Can the font size be smoothly scaled in relation to the width of the body or parent element? I am seeking a solution that does not involve javascript. Is it feasible to relate rem to a specific width? ...

cssresponsive-designfont-size

Please request user input in order to generate a multiplication chart

Is there a way to ensure that the program works properly so that when the user inputs a value, it is included in the multiplication table? <html> <head> <title> Multiplication Table </title> <style> body{ font-family: aria ...

javascripthtmlcss

What is the best way to ensure an input field and a button are aligned perfectly within the same div tag and of equal height?

During a recent HTML-CSS project, I encountered an issue where I struggled to ensure that two elements within a div tag were the same height. The elements in question were an input field and a button with an icon. Here is a snippet of the relevant HTML cod ...

htmlcssfrontend

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss

Is there a way to bypass the initial result when using document.querySelectorAll?

this is my own unique html content <div class="content-body"> <table style="text-align:center;" class="table table-bordered"> <tbody> <tr> <th>Text Line</th> </tr> <tr> <td> ...

javascripthtmlcss

What is the best way to transfer a data string from my HTML document to my server (using either Node or Express) and trigger a specific function with that data?

Currently, my node.js server is operational and successfully creating an excel document by fetching data from an API using Axios. Now, I am looking to implement a feature where users can input a string on my HTML page, which will then be sent to the web se ...

htmlnode.jsexpressaxios

Conflicting issues with jQuery's load() method

I am facing an issue with loading two HTML pages into a single div. I have index.html and try.html in the root folder, where try.html is loaded into index.html's div (#content) when Button 01 is clicked on index.html. The problem arises when I further ...

javascriptjqueryhtmlcss

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Currently, I am utilizing the Tag-it jQuery plugin found at Tag-it, which functions within a ul element. Within my horizontal list (a ul with multiple li elements), I aim to add another li element containing the Tag-it ul list alongside the main horizonta ...

jquerycsstag-it

A guide on handling POST response body parsing in NodeJS

const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(bodyParser.urlencoded({extended: true})); app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); }); app.post("/", function(r ...

javascripthtmlnode.jsexpress

Switch the dropdown selection depending on the checkbox status

I'm currently facing a bit of confusion with my project. I am constrained by an existing framework and need to come up with a workaround. To simplify, I am tasked with populating a dropdown list based on the selected checkboxes. I have managed to get ...

javascriptjqueryhtml

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

htmlcss

How can I ensure that my navbar-right remains fixed to the right side of the screen and is always visible at the top of the page as I

When the page first loads: After scrolling down: I am attempting to create a fixed navigation bar at the top of the screen, so that it remains visible as the user scrolls down the page. However, I am facing an issue where my navbar brand is positioned to ...

htmlcssbootstrap-4navbar

Issue with Left Alignment of Tabs in Material-UI

As of now, material-ui's latest version does not provide support for aligning tabs to the left in the component. However, I came across a workaround on this GitHub page I have implemented the same workaround, and you can view it here: Unfortunately, ...

cssreactjsmaterial-ui