I have the following CSS:
.point.active,
.point:active {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
Example: http://jsfiddle.net/7zmjvaxL/
This is working. But when the element is active and I hover over it, it loses the CSS colors. How I can keep the color if the element is active and if I hover over it?
Thanks.
Bootstrap comes with a number of default settings for certain elements.
In your case it is forcing this rule:
.btn-default.active:hover {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
Which is overriding your own rule set.
The best bet is to remove the class btn-default, because its not really a default button, its a customised one, and then add CSS rules for your element.
For example, this jsfiddle demo:
.btn-point {
color: #333;
background-color: #fff;
border-color: #ccc;
}
Try this :
.point.active,
.point:active,
.point:active:hover{
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
Do you have .point:hover{} somewhere ?
Related
How do I change link and background colours of a.btn.btn-default / btn.btn-default? I can’t find these in any CSS.
See here: https://www.webhosters.co.za/client/whois . There are two buttons at the bottom of the 404 error page. These buttons (home page and contact support) are in white text and white background. they are only visible when one hover over. How do I change the background and text?
Here is the small css snippet you can go through
section#main-body a.btn {
color: #fff;
background-color: #6aaf08;
border: 1px solid #6aaf08;
}
We are here inheriting button class Hope this helps
Happy coding!!
You can give class to that buttons and apply css on that like change in btn background and color
.contact-btn, homepage-btn{
background-color: #6aaf08 !important;
color: #fff !important;
}
or
you can add more parents to .btn-default so your css will be applied first and will be replace .btn-default property
#main-body .btn.btn-default {
background-color: #6aaf08;
color: #fff;
}
/* ------------------ or ------------ /*
if you don't want to add parents class in css you need to give important to that css property..
.btn.btn-default {
background-color: #6aaf08 !important;
color: #fff !important;
}
Great place for styling links is here
so, basically you would be looking for something like:
/* unvisited link */
a:link {
color: red;
background-color: white
}
/* visited link */
a:visited {
color: green;
background-color: white
}
/* mouse over link */
a:hover {
color: hotpink;
background-color: white
}
/* selected link */
a:active {
color: blue;
background-color: white
}
I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button onclick?
.btn-success {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #1F2838;
border-color: #494F57;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #161617;
border-color: #494F57;
}
.btn-success .badge {
color: #161617;
background-color: #ffffff;
}
The :active selector is what you need for the click.
.btn-sample:active {
// click styles here
}
It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:
.btn-sample:active {
box-shadow: none;
}
Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:
.btn-success:active:focus {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.
You have to use the !important declaration to do that correcly.
.btn-success:hover, .btn-success:active, .btn-success:focus {
color: #ffffff !important;
background-color: #1F2838 !important;
border-color: #494F57 !important;
}
I fixed this behaviour with this css code:
.btn-primary {
background-color: #8ed3cc;
border: 0 !important;
padding: 1rem 5rem;
border-radius: 0;
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
box-shadow: none !important;
}
.btn-primary:hover {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
.btn-primary:focus {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
Some inspiration from the bootstrap source for overriding these various button states where $off-white and $brand-black are defined by us:
.btn-success {
&:hover,
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
&:active,
&.active,
&.disabled,
&:disabled {
color: $off-white;
background-color: $brand-black;
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
}
}
That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
Just add the following code in your CSS
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617;
border-color: #494F57;
}
If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:
.btn-success {
color: #ffffff !important;
background-color: #161617 !important;
border-color: #494F57 !important;
}
Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).
If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.
Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.
There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).
if you want remove the box-shadow just add box-shadown:none and make it important or if you want add box-shadows just add color values.
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: none !important;
}
or
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: 0 0 0 0.2rem #c9cbfa !important
}
to trigger any class whenever a button is clicked, you need :active selector and to fix the default behavior of the bootstrap button on click, you need to set the background-color to any color you want to along with !important. It will then override the default styling of the bootstrap class.
.btn-outline-primary:active{ background-color: [your color] !important}
I have the requirement to format completely the default button in bootstrap 3. I have already changed the default background color in the customizer.
Yet I don't know where to change the formatting for the different button states (active, hover, focus). Does somebody know where I have to do the changes?
The following are the styles responsible for default button hover,active,focus state...change it accordingly.
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.open > .dropdown-toggle.btn-default {
color: #333333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
What exactly happening is that customizer darkens the background color by 10% and border color by 12%.
Less Mixins.
background-color: darken(#background, 10%);
border-color: darken(#border, 12%);
So there is no way for you to change color entirely in the customizer directly.
Using the customizer, the border-radius and border-color, as well as hover and active pseudo-classes are automatically calculated (using LESS), relative to the background color. If that's not what you want, you can change them each independently:
.btn-default:hover{
background-color:#eee;
border-radius: 2px;
border: 1px solid #000;
color:#999;
etc...
}
.btn-defauot:active{
background-color:...etc
}
I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:
http://jsfiddle.net/krishnathota/xzBaZ/1/
In the example there are no images, I'm afraid.
I'm trying to:
Change the background-color of the button when it is disabled
Change the image in the button when it is disabled
Disable the hover effect when disabled
When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
The text on the button can be selected. I want to avoid that, too.
I tried doing in button[disabled]. But some effects could not be disabled. like
top: 1px; position: relative; and image.
For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).
For browsers/devices supporting CSS2 only, you can use the [disabled] selector.
As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.
Selection problem: here is a link to the specific question:
How to disable text selection highlighting
Example for the disabled selector:
button {
border: 1px solid #0066cc;
background-color: #0099cc;
color: #ffffff;
padding: 5px 10px;
}
button:hover {
border: 1px solid #0099cc;
background-color: #00aacc;
color: #ffffff;
padding: 5px 10px;
}
button:disabled,
button[disabled]{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
div {
padding: 5px 10px;
}
<div>
<button> This is a working button </button>
</div>
<div>
<button disabled> This is a disabled button </button>
</div>
I think you should be able to select a disabled button using the following:
button[disabled=disabled], button:disabled {
// your css rules
}
Add the below code in your page. No changes made to button events, to disable/enable the button simply add/remove the button class in JavaScript.
Method 1
<asp Button ID="btnSave" CssClass="disabledContent" runat="server" />
<style type="text/css">
.disabledContent
{
cursor: not-allowed;
background-color: rgb(229, 229, 229) !important;
}
.disabledContent > *
{
pointer-events:none;
}
</style>
Method 2
<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />
<style type="text/css">
.btn-disable
{
cursor: not-allowed;
pointer-events: none;
/*Button disabled - CSS color class*/
color: #c0c0c0;
background-color: #ffffff;
}
</style>
By CSS:
.disable{
cursor: not-allowed;
pointer-events: none;
}
Them you can add any decoration to that button.
For change the status you can use jquery
$("#id").toggleClass('disable');
To apply grey button CSS for a disabled button.
button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
border: 2px outset ButtonFace;
color: GrayText;
cursor: inherit;
background-color: #ddd;
background: #ddd;
}
consider the following solution
.disable-button{
pointer-events: none;
background-color: #edf1f2;
}
For all of us using bootstrap, you can change the style by adding the "disabled" class and using the following:
HTML
<button type="button"class="btn disabled">Text</button>
CSS
.btn:disabled,
.btn.disabled{
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
Remember that adding the "disabled" class doesn't necessarily disable the button, for example in a submit form. To disable its behaviour use the disabled property:
<button type="button"class="btn disabled" disabled="disabled">Text</button>
A working fiddle with some examples is available here.
When your button is disabled it directly sets the opacity. So first of all we have to set its opacity as
.v-button{
opacity:1;
}
Need to apply css as belows:
button:disabled,button[disabled]{
background-color: #cccccc;
cursor:not-allowed !important;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
// apply css here what u like it will definitely work...
}
And if you change your style (.css) file to SASS (.scss) use:
button {
background-color: #007700;
&:disabled {
background-color: #cccccc;
}
}
The background color, font color and border are being lost when I drop an element.
How do I keep these properties intact? Here is the project in jsFiddle:
http://jsfiddle.net/n2learning/tV4n7/48/
Thanks!
Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:
.droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Here's the working example.
Your CSS rule:
#routinefilter .droptrue{
only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:
.droptrue{
Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:
#routinefilter .droptrue,
#dropTargetframe .droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle.
Or you could simply remove the ancestor id from the selector, to give simply:
.droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle demo.
This should do the trick.
#routinefilter .droptrue, #dropTargetframe .droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
The .droptrue elements will keep the same css style when inside the box as well!
Edit:
You can also change it to only .droptrue if you want those boxes to use this style wherever they are.
Change
#routinefilter .droptrue
into
.droptrue
Edit: Whoops, too late :)
Add to CSS
.droptrue
{
font: 16px serif
background: none repeat scroll 0 0 lightgray;
border: 2px solid #666666;
color: navy;
margin: 10px;
padding: 5px;
}