Adding a border to the input field in Bootstrap for enhanced styling and visibility

Looking to replicate the border style on an input element as shown in this image:

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

The current code I have is producing a different result. Can anyone assist me in achieving the desired border style?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
 .input-number{
    width: 25px !important;
    margin: 0 5px;
    font-size: 25px;
    border-bottom: 2px solid #000;
    text-align: center;
    vertical-align: bottom;
 }
  </style>
</head>
<body>
<div style="width:150px;padding:50px;">
  <input type="text" class="input-number" value="0"/>
</div>
</body>
</html>

Answer №1

To implement a custom border box, you can follow these steps:

HTML:

<input type="text" class="custom-input" value="0"/>
<div class="box-with-border"></div>

CSS:

.custom-input {
    width: 25px !important;
    margin: 0 5px;
    font-size: 25px;
    border: none;
    text-align: center;
    vertical-align: bottom;
}
.custom-input:focus {
    border:none;
    outline:none;
}
.box-with-border {
    border: 2px solid #000;
    border-top: none;
    width: 30px;
    height: 10px;
    margin-top: -8px;
    margin-left: 3px;
}

For further example and demonstration, refer to this Codepen link: https://codepen.io/YasirKamdar/pen/vdeRWw

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

Having trouble with my bootstrap carousel not functioning properly - issue with jQuery line causing the rest of the code to disable

I've been facing some challenges with this Bootstrap slider for quite some time now. Despite my best efforts and thorough research on the forum, I just can't seem to make it function properly. Here's the code snippet in question: <!DOCTY ...

What is the source of the width for this expansive dropdown menu?

I can't seem to crack this puzzle. When you navigate to the following link: click here, and select 'Accordian' from the topbar menu, where exactly does the dropdown menu width originate from? Upon inspecting it, I only see a computed value w ...

Refresh the page following a database update using asynchronous JavaScript and XML

After sending data to the controller using an ajax request, I need to reload my page. The controller will save the data into the DB and then the reloaded page should display the updated content: [Controller] public class ProcessingController : Controller ...

Is there a way to determine if an image is currently displayed on the screen?

If you want to check if an image is visible, you can use the following code: $('#div1 img:visible') This will select all visible image descendants within div1. Another option is: $('#div1 > img:visible') When iterating over every ...

Listening to changes in a URL using JQuery

Is there a way to detect when the browser URL has been modified? I am facing the following situation: On my webpage, I have an iframe that changes its content and updates the browser's URL through JavaScript when a user interacts with it. However, no ...

Ways to center a vertically aligned SVG in relation to text using Bootstrap

After experimenting with bootstrap, I have encountered an issue where I cannot vertically center an inline SVG relative to text. Below is a simplified example showcasing this problem: <!DOCTYPE html> <html> <head> <link rel=& ...

The vertical-align property in CSS fails to function properly when applied to specific rows or columns within the

Hello, I have been experimenting with table attributes and came across the valign attribute. However, I encountered some cells that were not affected by it. So, I decided to try CSS vertical-align instead. To my surprise, some cells were affected while oth ...

Updating the attribute of an ASP object using JQuery

Is there a way to utilize jQuery in order to make Chart1 visible? The code provided below is what I have attempted so far, however, it has not been successful. Any assistance would be greatly appreciated. Thank you. <script type="text/javascript> ...

Anchors that need to be clicked multiple times before activating

'I recently encountered a strange bug. My CSS3 anchors/buttons, which I have been simplifying by removing properties, sometimes require multiple clicks to function. This is completely new to me and quite perplexing. The issue seems to occur randomly, ...

What is the best way to create a unique background shape for Bootstrap 4 carousel controls?

Hello, I am currently working on a Bootstrap 4 Carousel where my controls are replaced by arrow images. I am attempting to create an oval-shaped background for the arrows as shown in this picture. However, I am facing issues with adjusting the border to ...

Error: The function app.all is not defined

This is a basic Angular page that I have set up. <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> ...

Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...

Creating a new element in jQuery and placing it at the position where an element has been dragged

I need assistance with ensuring that each new item is added in the same position, regardless of any previous repositioning due to dragging. Currently, only the first appended item appears where I want it to be. Can someone please offer guidance? $("#butto ...

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

Guide to stacking blocks on top of each other

How can I create even spacing between blocks of different heights? For instance, in the image below, you can see that block 2 should be positioned directly under block 1. https://i.stack.imgur.com/RnYbP.png https://i.stack.imgur.com/LHvlz.png ...

Fancybox overlay not adjusting to full height

When working with JavaScript: $(document).ready(function() { $(".fancybox").fancybox({ helpers: { overlay: { opacity: 0.4, css: { 'background-color': '#FFF' ...

Calculating JS functions before images are loaded

Following up on a previous question, I am utilizing JavaScript code from another article to position a "content" div relative to a fixed div in my project. However, the issue arises when the positioning of the "content" div is calculated only after all the ...

The submit button is getting disrupted by the background image being set

Implement the following CSS code to set a background image on a single-page app (Angular). .page::before { content: ''; position: absolute; background-size: cover; width: 100%; height: 100%; background-image: url("../../assets/weird. ...

It appears that the size of the textlabel in the HTML is not responsive to

When working with my HTML code, I've encountered an issue where I am unable to modify the height and width of a label using CSS. However, I have found that I am able to adjust the top and left positioning. HTML: <div id="loginname"> <l ...

Can the floating side of a div be switched after resizing?

Let's say I have two divs set up in the following configuration: |------------------------------| | div1 ------------------ div2 | |------------------------------| .div1{ float:left; } .div2{ float:right; } From my understanding, they w ...