I have a problem with a button.
I want to fix that gray effect on click but i don't know how to do so.
<div class="col-lg-7 col-sm-5 col-md-11">
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Look for something cool">
<div class="input-group-append">
<button class="btn btn-outline-secondary"><i class="fas fa-search"></i></button>
</div>
add this to your css
button:focus {
box-shadow: none !important;
outline: none !important;
}
PS: it's not recommended to remove it, as it is meant to make the user experience more accessible for people with disabilities or people who are not using touch/mouse as control (for example, if you're trying to navigate to that button using TAB button it will be very hard)
Do you mean the hover? if so create some custom CSS that states:
.btn-outline-secondary:hover{
// YOUR STYLES HERE (the grey comes from the background so...)
background: red (or whatever you want)
}
I think you are referring to the outline of the button when clicked/focused.
here is the CSS you might consider:
.btn:focus {
outline: 0;
}
Here is the detailed answer to your question. Remove blue border from css custom-styled button in Chrome
Related
So there seems to be a stubborn search button icon in the top bar of the staging site of my site but the problem is there is no turn-off or turn-on button for the icon in the admin area. I just can't seem to have it removed.
I believe I can remove this using CSS but I don't know how to.
The site I need help with is: (removed)
Add the following CSS rule to your template.css file:
.topbar .header-right .main-search {
display: none !important;
}
The file is located at /staging/wp-content/themes/oxpitan/css/template.css
If you have access to the html code, simply remove the div with the class "main-search gva-search".
Or, in your css add:
.main-search{
display: none;
}
Note, that this causes the entire class to hide. If you want to only hide that certain element, give it an Id and hide it in CSS the same way, except with # instead of .
Open inspect from chrome and get its id or unique class then add this css code to remove it
class or id {display:none!important;}
remove that from your theme it must be in the header
note: if you use display:none; it still loads but it cannot be seen, if you dont need it at all just delete it.
open the header and search for below codes and delete them.
<div class="main-search gva-search open">
<a class="control-search search-open"><i class="fa fa-search"></i></a>
<div class="gva-search-content search-content">
<div class="search-content-inner">
<div class="content-inner"><form method="get" class="searchform gva-main-search" action="https://sundaybasilagbalegacyfoundation.com/staging/">
<div class="gva-search">
<input name="s" maxlength="40" class="form-control input-large input-search" type="text" size="20" placeholder="Search...">
<span class="input-group-addon input-large btn-search">
<input type="submit" class="fa" value="">
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I am having trouble styling my bootstrap toggle button. I can't seem to make any styling work.
I only really need to increase the width of it but even that does not work. Here's a link to the jsfiddle. I want the toggle switch to just get a bit bigger. any help welcome!
<div class="col-sm-1 col-lg-3">
<label>Show available teams only</label>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input form-control" id="checkboxx">
<label class="custom-control-label" for="checkboxx"></label>
</div>
</div>
once again, if anyone could point me to how to style a bootstrap toggle button it'd be much appreciated!
Change the width of label::before to increase the width
.custom-switch .custom-control-label::before {
width:50px !important;
}
To make the checked label:after according to label:before change the size of transform as mentioned below
.custom-switch .custom-control-input:checked~.custom-control-label::after {
background-color: #fff;
transform: translateX(1.75rem)!important;
}
!important - is to change the predefined bootstrap css with our css
Before change in your file try in inspect element it will clear your doubt
I use bootstrap3 button like this
when user click the button it render model and when user closed the model
the button is not return to the old bg color.
user must click the bg page or click anything in the page then the button bg color will return to the old one.
How to return the bg color to the first one after user close the model ?
CSS:
*:focus {
outline:none !important;
}
to remove outline when use are clicked the button.
Here is jsfiddle: http://jsfiddle.net/etfu9zev/
Thanks.
For anyone who ever used bootstrap until now, the problem is obvious. Someone should have worked on it already, but coding is tough... Here is my solution:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<br/>
<button type="button" class="btn btn-success">Something</button>
</div>
</div>
*:focus {
outline:none !important;
}
body{
background:#DDD;
}
.btn-success:focus{
background-color: #5CB85C;
}
And a jsFiddle that illustrates it.
All you have to do is to make .btn-something:focus to have the same color as .btn-something. You can add the code for any type of button of bootstrap in your stylesheet, causing a reflow, but I'd rather cut the focus part from the bootstrap css.
Hope it helps.
I am trying to make two hyperlinked buttons go side by side. I saw this question but can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this question doesn't link anywhere but I think that has to do with using links instead of Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>
</body>
</html>
If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):
<style>
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
padding: 2px 8px;
}
</style>
<div class="container">
paste2
colSplit text
</div>
You could also do <button>paste2</button> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.
buttons would line up side by side automatically since they're display: inline-block by default (I think). I'd remove the float: left since it could be causing some issues when nesting.
You should never nest forms. It'll lead to some really screwy things.
However, if you want two forms side by side you can make them do that by adding display: inline to them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit
The onclick attribute should't make any difference at all.
I just tried to add css to attempt 2. how about this:
HTML:
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit"/>
</form>
CSS:
form{
float:left;
}
DEMO: http://jsfiddle.net/uzDZN/
NOTE: Add class to form which has this buttons. Otherwise css may effect other form elements in website.
Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.
I need to create inline element to control collapsible element. I've created the following:
<label class="control-label" for="surname">Surname</label>
<div class="controls">
<input type="text" class="input-xlarge" id="surname">
<p class="help-block">Input your surname. <a data-toggle="collapse" data-target="#surname-more">More...</a></p>
<div id="surname-more" class="help-block collapse in">Additional information about surname will be here.</div>
</div>
So, such element is a here. But it looks bad (blue link within grey text). Is there any standard Twitter Bootstrap class, which should be used in such scenario?
Applying the help-block style to the link makes the "More..." text gray, but the link still shows the dark blue color when you hovered over the link.
I would write your own custom style to handle this:
.help-block-link {
color: #999;
}
.help-block-link:hover {
color: #333;
text-decoration: none;
cursor: pointer;
}
<a data-toggle="collapse" data-target="#surname-more" class="help-block-link">More...</a>