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;}
When I want to make an element with div, it creates a space between the content and the border. (blue line). Using span causes the element to break, displaying the content outside the borders.
http://i66.tinypic.com/23k4xsp.png
This is my CSS code:
#main1 {
margin-left: 40%;
background-color: lightgrey;
width: 20%;
border: 5px;
padding: 5px;
border-style: solid;
border-color: grey;
border-width: 2px;
text-align: left;
}
body {
text-align: center;
background-color: yellow;
font-family: "Arial";
}
And my HTML:
<!DOCTYPE html>
<html>
<head>
<title>BMI</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main1">
<h3>BMI calculator</h3>
<form action="results.php" method=""post"">
<input type="radio" name="gender" value="man">Man<br>
<input type="radio" name="gender" value="vrouw">Vrouw<br><br>
Lengte:<br>
<input type="text" name="lengte"><br>
Gewicht:<br>
<input type="text" name="gewicht"><br><hr>
<button action="submit">Submit</button>
</form>
</div>
</body>
</html>
Is there any workaround? I'm fairly new to webdesign, I couldn't find anything on the webz... Thanks
The space (line blue) comes because the <h3> tag has a default margin. If you set it to margin: 0 the space will disapear.
h3{
margin: 0;
}
Also, I cannot reproduce your line break: JSFiddle.
This is actually caused by the h3 tag. The header tags by default come with a margin both above and below the element.
Try adding to your CSS:
h3 { margin-top: 0; }
This is the code I'm working with
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Place Bid</title>
<!-- Bootstrap -->
<link href="../stylesheets/bootstrap.min.css" rel="stylesheet">
<link href="popover.css" rel="stylesheet">
</head>
<body>
<div class="container">
<ul class="list-unstyled">
<button class ="bidpopover"><a data-placement="bottom" data-toggle="popover" data-title="Place Bid" data-container="body" type="button" data-html="true" href="#" id="bid">Place Bid</a></button>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group" type ="wage">
<span class="input-group-addon">$</span>
<input type="text" class="form-control"/>
</div>
<br><br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="cancel" class="btn btn-primary">Cancel</button>
</div>
</form>
</div>
</ul>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Popover UI functionalities-->
<script src="popover.js"></script>
</body>
</html>
CSS
.grey-box /* background of popover box*/
{
background-color: gray;
height: 200px;
margin-bottom: 10px;
font-size: 2em;
text-align: center;
padding: 80px;
}
.form-control { /* popover text field*/
width:120px;
}
.popover { /* popover responsiveness*/
max-width:300px;
}
button[type="submit"]{ /* Submit button */
border: 0;
padding: 8px;
background: #45AD00;
color: white;
border-radius: 5px;
margin-left: 20px;
margin-right: 30px;
}
button[type="cancel"]{ /* Cancel button */
border: 0;
padding: 8px;
background: #FC3838;
color: white;
border-radius: 5px;
margin-right: 20px;
}
.bidpopover{ /* Place Bid button*/
margin-top: 50px;
padding: 6px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: white;
border: 2px solid #4CAF50;
border-radius: 5px;
}
.bidpopover:hover { /* hovering over "Place Bid" button */
background-color: #4CAF50;
color: white;
}
ANGULAR.JS*
$( function() /* popover action */
{
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
} );
$('body').on('click', function (e) { /* closes popover when clicked outside of it */
//only buttons
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
I ran it through the browser and the popover would only function if the mouse click was done above the popover box. Also on a side note, are HTML buttons capable of functioning if clicked anywhere on the button rather than just the button label? My "Place Bid" button would only open the popover if the mouse click happens specifically in the middle area where the button label is.
First of all, it's not recommended to place <a> tags inside <button>s.
I transferred the popover functionality to the <button>. There were quite a few other minor issues, some related to HTML markup, some to CSS, which I cleaned and prefixed.
I also fixed a logic error in your jQuery code, which was preventing the popover from opening on first click after it had been closed with a click outside the popover.
And I colored the popover arrow same as the background color of the popover header (I never understood why it's not default, since the popover opening on bottom will always have the arrow adjacent to its header.)
jsFiddle
Cheers!
I am trying to achieve the effect as shown in below screenshot using Bootstrap 3.
As you can see, the search button is both:
1) inside the input
2) styled with a glyphicon so as to not appear like a "button".
How can I achieve a similar effect with Bootstrap 3? I would like to place a button with a magnifying glass glyphicon at the end of a text input, however the button keeps appearing below the input as opposed to inside of it.
A wrapper div with position: relative; then positioning the submit button on top using position: absolute;. Like this:
http://jsfiddle.net/VtP5k/
HTML
<form>
<div id="search">
<input type="text" />
<button type="sutmit">Search</button>
</div>
</form>
CSS
#search {
position: relative;
width: 200px;
}
#search input {
width: 194px;
}
#search button {
position: absolute;
top: 0;
right: 0;
margin: 3px 0;
}
Try this.
In bootstrap you have to use button type submit instead of input type;
Both works fine! use button in bootstrap!
div {
padding: 15px;
background: #000;
}
.btn {
text-align: left !important;
font-size: 12px !important;
padding: 20px 12px !important;
width: 200px !important;
color: #888 !important;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div>
<button type="submit" class="btn btn-default">
awesomeness <span class="glyphicon glyphicon-search pull-right"></span>
</button>
<div>
Or see this fiddle
<button type="submit" class="btn btn-default">
Awesomeness <span class="glyphicon glyphicon-search"></span>
</button>
The problem is because the button is adhering to the normal flow of html and thus appears below the first element. What you need to do is wrap both the input and search button in an div and then make the search button absolute positioning. Then you can ad some jQuery functionality on a click function to achieve an event is needs be.
<html>
<body>
<div>
<input type="text" value="test"/>
<span id="search" class="absolute">x</span>
</div>
<style>
.absolute {
position:absolute;
top:9px;
left:115px;
}
</style>
<script>
$(document).on('click','#search',function(){
//some functionality
}
</script>
</body>
</html>
I'm having some trouble with displaying a popup div with CSS. The problem is better explained with an example. Take the following html:
<html>
<head>
<style type"text/css">
#popup {
color: #fff;
background: #8c0000
}
#form {
background: #ccc;
color: #000;
position: absolute;
display: none;
}
#popup:hover > #form {
display: block;
}
</style>
</head>
<body>
<span id="popup">
Popup
<div id="form">
<form>
<label>Text Field</label>
<input type="text" />
<label>Select Field</label>
<select>
<option value="opt1">val1</option>
<option value="opt2">val2</option>
</select>
</form>
</div>
</span>
</body>
</html>
This consists of a single span element and a single hidden div element that contains a form. The div is displayed when the mouse is hovering the span element. The problem is that when I'm going to select an option in the dropdown box, the div disapears, as if it had lost focus. The result is that I can only change the dropdown value using the keyboard.
My question is: How do I fix that? Any clue on the subject is appreciated.
I believe you might be out of luck here, as rendering of <option> elements are dependent on browser / OS / platform, and not part of the CSS box model. Using JavaScript (and jQuery), this is pretty straight-forward. I've added a "Done" button to your form, as this might be a better solution for choosing when to hide the form. Otherwise, the user would have to be very careful not to move the mouse pointer outside the selection dropdown, or everything would disappear (if I've understood your request correctly.)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type"text/css">
#popup {
color: #fff;
background: #8c0000
}
#form {
background: #ccc;
color: #000;
position: absolute;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
function showForm() {
$("#form").show();
}
function hideForm() {
$("#form").hide();
}
</script>
</head>
<body>
<span id="popup" onmouseover="showForm()">
Popup
<div id="form">
<form>
<label>Text Field</label>
<input type="text" />
<label>Select Field</label>
<select>
<option value="opt1">val1</option>
<option value="opt2">val2</option>
</select>
<input type="button" value="Done" onclick="hideForm()" />
</form>
</div>
</span>
</body>
</html>
I'm not sure what, exactly, the problem is, but the following css works in Chrome 6.0.472.62 and Firefox 3.6.10 on Ubuntu 10.04:
#popup {
position: relative;
}
#form {
width: 12em;
display: none;
}
#popup:hover #form {
clear: both;
margin: 0;
display: block;
position: absolute;
top: 1em;
left: 0;
}
#popup form select:focus,
#popup form select:hover {
display: block;
}
Demo at: jsbin
And it's worth changing #popup to a div, as (I thought I) commented earlier.
You are showing the popup only on hover, so when the mouse leaves your popup, it is hidden,
You have to show it onmouseover of the span element, and hide it when the use clicks somewhere else on the page (other than the popup) or probably when he hits the close option on the popup.
I dont think you can do that with pure CSS. You would need some javascript.