The functionality of outlines in Bootstrap 4 seems to be malfunctioning

What is the method used by Bootstrap to disable the HTML outline property? After adding the form control class to my input, I noticed that "outline: none;" no longer has an effect.

<input class="form-control" style="outline:none;">

Check out the codepen demonstration here: https://codepen.io/Eli92/pen/WXXbRa

Although I could create my own CSS class for this input, I am curious about what is going on here. However, as a beginner, I feel unsure about submitting a bug report.

The reason behind removing the outline is to replace it with my own custom design on an outer element, similar to what websites like Youtube and other popular sites do with their search bars.

htmlcsstwitter-bootstraptwitter-bootstrap-4

Answer №1

Indeed, each form-control receives a border and box-shadow when focused, therefore by adding the following CSS:

.form-control:focus {
  border: none;
  box-shadow: none;
}

You can effectively remove the styling.

Answer №2

I'm not entirely sure what information you're looking for.

Hopefully I can provide the correct answer.

The outline of an element refers to the border surrounding it when clicked. In your codepen, you have set the outline: none, which means nothing happens when the element is clicked. Your use of outline: none appears to be functioning properly.

The border is the visible edge surrounding the element. Bootstrap typically adds a border around elements, so using border:none should achieve the desired effect based on my interpretation of your question.

Answer №3

The problem you are facing is due to the definition of .form-control in Bootstrap, which assigns additional attributes to inputs styled with this class.

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

To change the border style for your element, you need to override the default settings. If you want to remove the border completely, you should set the border thickness to 0px.

border: 0px;

Check out the demo on Codepen: https://codepen.io/anon/pen/eeeNZB

Answer №4

.input-field triggers a drop-shadow (instead of an outline) on :focus. To eliminate this effect, all you have to do is replace the .input-field:focus style rule in the CSS:

.input-field:focus {
    drop-shadow: none;
}

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

Issue with div element not stretching to 100% width

I am currently working on a fluid layout design where the template includes a header, menu, and body section. <div class="w100 h100"> <div id="headerBox" style="height: 10%;" class="w100"> <div style="width: 80%;" class="lfloat ...

javascriptjqueryhtmlcss

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

Within my custom Angular component, a third-party library is dynamically adding an HTML element. I am seeking a solution that can apply Angular's encapsulation attributes to these elements regardless of the specific third-party library being used. If ...

cssangularangular-components

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Currently, I am working on a website with only one HTML page. The main functionality involves fetching the URL to extract an ID and then sending it to an API using an AJAX call. Upon success, the data related to the extracted ID is displayed on the page. H ...

javascriptjqueryhtmlajaxurl

Media Queries elude my complete comprehension

Can anyone provide a brief overview? For example, should buttons and images, as well as a footer, all be placed in one Media Query or kept separate? I'm feeling overwhelmed by this. ...

css

Having trouble determining the dimensions of a newly added element

I am using jQuery to dynamically add an image but I am unable to retrieve its dimensions (width and height). Below is the snippet of code from my HTML file: <input type="checkbox" id="RocketElement" data-id="1"> And here is the JavaScript/jQuery c ...

javascriptjqueryhtmldom

Modifying the default text within a select box using jQuery

Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...

javascriptphpjqueryhtml

Collapse the accordion by sliding it back to the top position

I have successfully implemented the Flexible Slide-to-top Accordion on my webpage. Initially, I struggled with the functionality to have only one accordion open at a time due to my limited knowledge of jQuery. However, after overcoming this challenge, I n ...

jqueryhtmlioscssaccordion

Google Maps in Angular is not showing up

My Angular Google Maps implementation seems to be working, but unfortunately, the map is not showing on my website. I have confirmed that my JS is loading the maps and I can retrieve the map properties. Interestingly, when I check the Chrome AngularJS Debu ...

javascripthtmlangularjsgoogle-maps

Issue with JQuery CSS Height not functioning properly in Chrome and Safari browsers

Our website displays a list of items in table format. The number of items varies daily, affecting the height of the table. A vertical bar next to the table should resize based on the table's height each day. The HTML structure we use is as follows: ...

jquerycssipad

Trouble with Bootstrap 5 Dropdown Menu failing to drop down

I am attempting to utilize a dropdown menu on my Wordpress site with Bootstrap, but it is not working as expected. If I manually add the class "show" to my dropdown-menu div, the menu displays, but the button does not function. These are the scripts being ...

javascriptphpcssbootstrap-5

Looking for CSS properties to personalize a dropdown list in an HTML select element

After spending several days scouring the internet and trying out numerous methods, I have yet to find a satisfying way to create my own dropdown list. Using CSS, I am able to customize the text color (A), the border style and color (B) of the dropdown fie ...

htmlcssdrop-down-menu

css - design your layout with floating div elements

I used to design layouts using tables, but now I'm trying it out with divs. However, I'm still struggling to get the layout right. It's not as straightforward as using tables. For instance, my code looks like this: var html_output = "< ...

jquerycsshtml

The jQuery mobile Multiselect feature is not correctly updating the selected attribute

In my jQuery mobile custom multiselect, when I choose an item, the list of items in the HTML select tag does not update with the selected attribute. Check out the Multiple selects example on the page: <div data-role="fieldcontain" class="ui-field- ...

javascriptjqueryhtmljquery-uijquery-mobile

Tips for creating fully stretched columns within Bootstrap framework

I have a simple code example available on codepen, but here is the markup for convenience: <div class="container my-container"> <div class="row m-row justify-content-between"> <div class="col-2 my-col">One of three columns</div& ...

cssbootstrap-4bootstrap-grid

The Bootstrap navigation pills do not function properly when using a forward slash in the tab link

I am currently working with Bootstrap and using nav pills. I have noticed that if I include a / sign in the link of a tab, it causes that specific tab to malfunction and triggers a JavaScript error in jQuery's own code when clicked on. How can I go ab ...

javascriptjquerytwitter-bootstrapnav-pills

Is it possible to embed a Blazor component as a Web Component in a standard HTML page that is not using Blazor?

Is there a way to render a Blazor component as a standalone DOM fragment, or integrate it as a standard Web Component in a vanilla HTML/JS page? This question may seem simplistic from the perspective of Blazor architecture. While I'm no expert in Bla ...

c#html.netblazorweb-component

Implementing a JavaScript function to trigger the 'GET' method upon page load repeatedly

I am facing a strange issue where a javascript function is running multiple times upon page load (7 times in Chrome, 3 times in IE, 7 times in Firefox, 6 times in Opera, 4 times in Safari, and 4 times in Edge). What's going on??? Moreover, the xmlHtt ...

javascripthtml

Combine two separate variables and insert them into a single cURL command line

I need to incorporate a random value from a variable into a cURL command. Additionally, I want the cURL command to execute a function using this random value. At the end of the function, I want to add a different value to the first one for completion and t ...

phphtmlvariablescurl

The requested resource at http://js:port/socket.io/1/ could not be located (Error 404

Having trouble connecting with Socket.io. This is the server-side code: function chatserver(){ var express = require('express'), app = express(), server = require('http').createServer(app).listen(app.get('port'),function ...

javascripthtmlnode.jssocket.io

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

Is it possible to use both col and d-flex classes together? I want to center the element with the class "description" by combining them. <section class="container-fluid mb-5"> <div class="row"> <div class=&q ...

cssflexboxbootstrap-5