I am looking to achieve this:
http://getbootstrap.com/javascript/#popovers-examples - scroll to the "live Demo" and hit the red popover button, in Chrome on OS X.... It's perfect beautiful
However, in my own code it outlines blue, despite a litany of CSS efforts from me to remove this!
It looks correct in Safari and Firefox but a no go in Chrome!
I see .btn:focus has an outline on it:
.btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
Try changing this to:
.btn:focus {
outline: none !important;
}
Basically, look for any instances of outline on :focused elements — that's what's causing it.
Update - For Bootstrap v4:
.btn:focus {
box-shadow: none;
}
For any googlers like me, where..
.btn:focus {
outline: none;
}
still didn't work in Google Chrome, the following should completely remove any button glow.
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
outline: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus{
outline:none;
box-shadow:none;
}
This should remove outline and box shadow
In bootstrap 4 the outline is no longer used, but the box-shadow. If it is your case, just do the following:
.btn:focus {
box-shadow: none;
}
With scss:
$btn-focus-box-shadow: none!important;
.btn.active or .btn.focus alone cannot override Bootstrap's styles. For default theme:
.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus {
outline: none;
}
The simplest solution is: Create a CSS file and type this:
.btn:focus, .btn:active:focus, .btn.active:focus {
box-shadow: none !important;
}
You can remove the shadow without doing any extra CSS yourself.
Normally add a button like this.
<button class="btn btn-primary">Button</button>
You can simply add shadow-none to remove the outline.
<button class="btn btn-primary shadow-none">Button</button>
This will remove it - short and clean:
.btn {
outline: none !important;
}
Here's the solution:
#sec-one{padding: 15px 0;}
p{text-align: center;}
/*
* Change the color to any color you want;
* or set to none if you don't any outline at all.
*/
*:focus:not(a){
outline: 2px solid #f90d0e !important;
box-shadow: none !important;
}
<!doctype html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<section id="sec-one">
<div class="container">
<div class="row">
<div class="col">
<form>
<fieldset class="form-group">
<input type="text" class="form-control" placeholder="Full Name" required>
</fieldset>
<fieldset class="form-group">
<input type="email" class="form-control" placeholder="Email Address" required>
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-default" value="Sign Up">
</fieldset>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
This works 100% hope it helps you.
Search and replace
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
Replace to
outline: 0;
If the above answers still do not work, add this:
button:focus{
outline: none!important;
box-shadow:none;
}
It worked for my bootstrap button after a such stress
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none!important;
box-shadow: none;
}
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
button.btn:focus,
button.btn:active,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
box-shadow: inset 0 -1px 0 #ddd;
outline: none !important;
}
you can put this tag into your html.
<button class='btn btn-primary' onfocus='this.blur'>
Button Text
</button>
I used on focus because onclick still displayed the glow for a microsecond and made a horrible looking flash in terms of using it. This seemed to get rid after all the css methods failed.
That CSS goes from this file "tab-focus.less" in mixins folder (it could be difficult to find, because mixins are not shown at chrome dev-tools). So you should edit this:
// WebKit-style focus
.tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
In the mixins of the Bootstrap sources Sass files, remove all $border references (not in the outline variant).
#mixin button-variant($color, $background, $border){
$active-background: darken($background, 10%);
//$active-border: darken($border, 12%);
color: $color;
background-color: $background;
//border-color: $border;
#include box-shadow($btn-box-shadow);
[...]
}
Or simply code you own _customButton.scss mixin.
If someone is using bootstrap sass note the code is on the _reboot.scss file like this:
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
So if you want to keep the _reboot file I guess feel free to override with plain css instead of trying to look for a variable to change.
If you are using bootstrap v5.1 or any other version. To remove the outline of your bootstrap navbar toggle button do this:
.navbar-toggler:focus {
box-shadow: none !important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>navbar</title>
</head>
<body>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Navbar toggler button</h5>
<span class="text-muted">Check the CSS to see how to remove the outline of the toggler button.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
-->
</body>
</html>
Hope this answer will help you.
Bootstrap 5 and up
.btn-primary {--bs-btn-focus-shadow-rgb: none;}
Related
Using Bootstrap 4.6, all my form select dropdowns have a blue background like this:
I have a .scss file setup similar to this:
// Custom Variables
#import '../../vendor/bootstrap-4.6.0/scss/functions';
#import '../../vendor/bootstrap-4.6.0/scss/variables';
// Bootstrap Overrides
$primary: #6b37c4;
$link-color: $primary;
$link-hover-color: darken($primary, 10%);
$WHAT-GOES-HERE-BG?: $primary; // <-- what goes here?
My question:
Is there a Bootstrap 4.6 variable I could change that would change this blue background color to something else, globally?
If yes, what is the variable name(s)? I tried custom-select-bg and custom-select-background, form-select-bg, and similar.
If not, is there a way to change this blue background for Bootstrap 4.6? I have no understanding of browser compatibility, but obviously would like something long-lasting. I tried several solutions on html - Change select list option background color on hover but many were out-of-date or hacky.
Basic example
I would expect the background color of a select option to turn yellow on hover, but it doesn't. I also don't know how to prevent the select menu from closing to inspect the CSS! Going a little bit crazy.
#mySelectDiv {
max-width: 300px;
padding: 1rem;
}
option:hover {
background-color: yellow;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="my-3" id="mySelectDiv">
<select class="custom-select" id="myCustomSelect">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
My recommendation is not to style it. For real.
My second recommendation, if you don't take the first, would be to use a battle-tested select plugin, which already handles accessibility for you and has some decent options for styling the DOM elements. Under the hood, none of them use <select>, but generic (and style-able) DOM elements.
Making your own is not that hard, but far from ideal, because selects (or dropdowns) are some of the trickiest UI components. For example, the .dropdown-menu is expected to overflow containers with overflow: hidden in most cases, as nobody wants a sudden scrollbar on such a container when you open a dropdown inside it. That's where it gets really tricky.
For what it's worth, here's a "custom" solution:
$('.dropdown-menu a').click(e => {
$('.dropdown-item', e.target.closest('.dropdown')).removeClass('active');
mySelect.value = e.target.innerText
$(e.target).addClass('active')
mySelect.focus()
})
#mySelect {
background-color: #fff !important;
margin-right: -1.5rem;
padding-right: 1.5rem;
}
#mySelect:focus {
border-color: #6b37c4;
box-shadow: 0 0 0 0.2rem rgb(107 35 196 / 25%);
}
.dropdown-toggle {
display: flex;
align-items: center;
}
.dropdown .dropdown-menu {
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 7%), 0 2px 2px 0 rgb(0 0 0 /5%), 0 3px 1px -2px rgb(0 0 0 / 4%);
border: 1px solid rgb(0 0 0 / 7%);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
background-color: rgb(107 35 196 / 10%);
color: black;
}
.dropdown-menu .dropdown-item.active {
background-color: #6b37c4;
color: white;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div style="max-width: 200px">
<div class="m-3 position-relative dropdown">
<div class="dropdown-toggle" data-toggle="dropdown">
<input readonly value="" class="form-control" placeholder="Open this select menu" id="mySelect" />
</div>
<div class="dropdown-menu w-100">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js"></script>
It's meant as a proof of concept. Feel free to test it on all browsers/OS combinations and/or improve it, but don't count on me to update it for edge-cases.
If you do go the custom route here's a few to-do's:
open/close using keyboard navigation
add appropriate role and aria attributes to its elements
make sure it renders decently on all mobile device types (ios, android). Use actual devices (or browserstack), not emulators. On emulators it will probably behave as expected.
Hello,
I am trying to finish the border around the button of btn-primary and after click it shows light blue border adjusting outline:0 but it is useless. How can I remove the border from this button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.container {
max-width: 520px;
max-height: 180px;
background-color: antiquewhite;
}
fieldset {
max-width: 518px;
max-height: 178px;
padding-right: 15px;
padding-left: 15px;
}
.btn{
font-weight:600;
color:#fff;
text-align:center;
vertical-align:middle;
border:1px solid transparent;
font-size:1.2rem;
line-height:1.5;
}
.btn-primary {
color: #fff;
background-color: #1172f4;
border-color: #000000;
}
.btn-primary: hover {
color: #fff;
background-color:#1172f4;
border-color: black;
}
.btn-primary: focus, .btn-primary. Focus {
color: #fff;
background-color:#1172f4;
border-color: #1875f6;
box-shadow: 0 0 0 0.2rem rgba(38, 38, 38, 0.5);
}
.btn: focus, .btn. Focus {
outline: 0;
}
button: focus{
outline:0;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">
<fieldset>
<!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-top:20px;width:100%;">
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div>
<!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%;">Get Started</button>
</div>
<!--End of bottom div-->
</fieldset>
<!--End of second form fieldset-->
</form>
</body>
</html>
My container and elements are also not showing the responsive behavior. Please help me to fix both issues. Which property in bootstrap btn-primary button handle these both borders.
Why are you declaring styling for buttons twice here?
.btn: focus, .btn. Focus {
outline: 0;
}
button: focus{
outline:0;
}
Also, styling using html components is a bad practice in web design. You should use class in most cases. For changing a particular element you should use id.
Answering to your question, it is a possible duplicate of Bootstrap button - remove outline on Chrome OS X that property around button when clicked is not outline, it is a box-shadow property. Remove your button styling definitions and replace them using this code:
.btn:focus{
box-shadow: none!important;
}
Then the shadow after click will disappear.
On another note, it seems that you are already using bootstrap 5 and inheriting styles from it. However, you are redefining the primary button styles manually. Why? Your imported CSS file should automatically update the primary button style. Also, do not put a space between focus and :.
As for your responsiveness issue, make your form responsive using bootstrap library since you're already using it.
https://getbootstrap.com/docs/4.0/components/forms/
The outline type thing that appears around the button as soon as it is clicked is not actually the outline property, it's the box-shadow property.
So, to solve this problem just add this box-shadow: none !important to the css of that button.
Try this out, it's the active class throwing off your code.
.btn-primary:active:focus {
box-shadow:none;
}
Inside your Chrome inspector, you can toggle the button states to debug. This one uses a combination of both :active:focus
Codepen
https://codepen.io/rickyhaswifi/pen/LYZMeoN?editors=1010
I have tried for hours to get this to work trying multiple solved stack solutions and none have worked.
I am assuming I am either missing something or I have my divs/spans incorrect. Any help would be greatly appreciated. Currently my text is very small and bg color is grey and slightly transparent.
Also if it is possible to make the "info" icon smaller that would be great as well. Thank you!
.mainContainer {
width: 40%;
float: left;
}
.info {
display: flex;
}
.info .span {
align-self: center;
}
.info-button{
padding: 0;
border: none;
background: none;
outline: none;
background-color: transparent;
top:-10px;
}
<div class="mainContainer">
<h3>Main Title</h3>
<div class="info">
<h5>Title</h5><span class="info-span">
<button mat-icon-button class="info-button" #tooltip="matTooltip" matTooltip="Tooltip Text">
<mat-icon color="basic" >info</mat-icon>
</button>
</span>
</div>
</div>
Try this
::ng-deep .mat-tooltip {
background-color: transparent;
font-size: 12px;
}
You can set !important if not working.
Hope useful
You can use popper js to integrate and style tooltips it's easy and simple :
this is a quick exemple from the documentation :
<!DOCTYPE html>
<title>Popper example</title>
<style>
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
</style>
<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>
or visit the official website to learn about popper js :Tutorial
I am working on a site where in the master css file anchor outline has been set to none like this:
*:focus {
outline: none!important;
}
I have added a more specific class to override this the above like this:
header a:focus {
outline: initial!important;
}
Problem is that this is not working. Below code works
outline: 2px solid $black!important;
but I want the browser default styling to show which I thought should be possible with "initial" keyword instead of me trying to mimic the all the default styles.
Today I stumbled upon this. An easy fix was using revert. Works on Chrome for me.
.outline-reset {
outline: revert !important;
}
It may very well be that your browser does not have a default outline for the :focus pseudo-class. In this case initial and unset wouldn't help.
If you want a particular outline for some selectors you would have to define it:
:focus {
outline: none;
}
header a:focus {
outline: 1px dotted #666;
}
<p>https://developer.mozilla.org/</p>
<nav>
<ul>
<li>https://developer.mozilla.org/</li>
</ul>
</nav>
<header>https://developer.mozilla.org/</header>
On my home machine (Windows 10) I tested on Firefox, Chrome, Edge and IE11: none show outlines by default on :focus.
Here is a test you can run in various browsers. To me it shows that the default in most browsers is the absence of an outline on the :focus state. The exception is IE11.
:focus {
outline: 1px dotted #f60;
}
section :focus {
outline: initial;
}
<body>
<h2>With specified <code>:focus</code> outline</h2>
<p>https://developer.mozilla.org/</p>
<nav>
<ul>
<li>https://developer.mozilla.org/</li>
</ul>
</nav>
<form>
<button type="button">button button</button>
<button type="button">submit button</button>
<input type="submit" value="submit input">
<input type="image" src="https://via.placeholder.com/100x30" border="0" alt="Submit" />
</form>
<img src="https://via.placeholder.com/200x30">
<hr>
<section>
<h2>With <code>:focus</code> outline reset to <code>initial</code></h2>
<p>https://developer.mozilla.org/</p>
<nav>
<ul>
<li>https://developer.mozilla.org/</li>
</ul>
</nav>
<form>
<button type="button">button button</button>
<button type="button">submit button</button>
<input type="submit" value="submit input">
<input type="image" src="https://via.placeholder.com/100x30" border="0" alt="Submit" />
</form>
<img src="https://via.placeholder.com/200x30">
</section>
If you define outline styles and want to ‘revert’ back to the default User Agent styles on :focus, this will help. You will find cross-browser issues using the initial property... I recommend this one.
.myClass:focus {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color;
}
To get an outline close to the browser default, use the auto keyword with the appropriate color for your browser. See this link for more information.
a:focus {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
When I use Custom input file in bootstrap 4, don't change my input and don't show browse button.
file-browser
<label class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
.custom-file
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
.custom-file-input
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
.custom-file-control
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;
As far as i've checked - you need to insert the :before and :after pseudoelements - then it works.
.custom-file-control:before{
content: "Browse";
}
.custom-file-control:after{
content: "Add files..";
}
http://codepen.io/powaznypowazny/pen/jBqzgR
The documentation states that you should set the language of the document. For example, setting just:
<html lang="en">
was enough to get it working, unless like in #masud_moni answer, you have specified another language then use that instead of "en".
Try using the following code. Hope it is gonna fix your problem. It is given just under the code example in the Bootstrap page.
$custom-file-text: (
placeholder: (
en: "Choose file...",
es: "Seleccionar archivo..."
),
button-label: (
en: "Browse",
es: "Navegar"
)
);
Concerning the button, you can specify the language in your .css file and it will appear :
.custom-file-control:lang(fr)::before{
content:"PARCOURIR";
}
.custom-file-control:lang(en)::before{
content:"BROWSE";
}
To show custom-file-control's placeholder and its button caption in non english pages you must add to your CSS .custom-file-control:before and .custom-file-control:empty::after as in this snippet.
At this moment, there open issue to get the filename inside the custom control after selection... you can apply the onchange event workaround showed here.
/* Valid for any language */
.custom-file-control:before {
content: "Search";
}
.custom-file-control:empty::after {
content: "Choose a file...";
}
/* Specific for spanish language */
.custom-file-control:lang(es)::before {
content : "Buscar";
}
.custom-file-control:lang(es):empty::after {
content : "Seleccionar un fichero...";
}
<!DOCTYPE html>
<html lang="es-es">
<head>
<title>Test custom-file-control</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="mt-5 ml-5">
<label class="custom-file">
<input type="file" id="file" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])" required>
<span class="custom-file-control"></span>
</label>
</div>
</body>
</html>
I hit the same problem, came here for solution, did not find it, so I continued to dig for it: the right way to do it is to have a div of class custom-file and the input and label inside it, not the input inside the label.
<div class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<label class="custom-file" for="Image">Select file to upload</label>
</div>