I'm trying to set a custom color for the active state of a bootstrap button.
HTML:
<button class="btn btn-lg btn-primary" id="addToCart" data-value={{food.name}}>Add to cart</button>
CSS:
.btn-primary {
color: #FFFFFF;
background-color: #43A047;
border-color: #43A047;
}
.btn-primary:active,
.btn-primary.active {
background-color: #43A047;
}
.btn-primary:hover {
color: #43a047;
background-color: #FFFFFF;
border-color: #43a047;
}
With this code I'm able to change the color and the hover color of the button, but when I click the button the default btn-primary color remains. What am I doing wrong here?
Twitter's Bootstrap provides a Button Generator, take a look into the generator, maybe you can change the generated CSS code to change to meet with your requirements:
http://twitterbootstrap3buttons.w3masters.nl/
Try something like this.
.btn.btn-primary {
color: #FFFFFF;
background-color: #43A047;
border-color: #43A047;
}
.btn.btn-primary:hover {
color: #43a047;
background-color: #FFFFFF;
border-color: #43a047;
}
.btn.btn-primary:focus {
background-color: #f00;
}
Related
I am trying to change the text color that user types inside text box, and the border of all text boxes from normal to blue.
EDIT
I need the text boxes, input number, drop down lists to have a blue border on page load, and the text typed inside is blue too
I tried this:
input[type="text"] {
color: #0090ff;
border-color: #0090ff;
}
input[type=number]:-webkit-inner-spin-button {
color: #0090ff;
border-color: #0090ff;
}
.editor-field select
{
color: #0090ff;
border-color: #0090ff;
}
The problem now that only the input type=text border is blue, but the text isn't, and the input type="number" and the are not showing any changes.
Use the :focus selector.
input[type="text"] {
color: #0090ff;
border-color: #0090ff;
}
input[type="text"]:focus {
color: initial;
border-color: initial;
}
<input type="text">
Use :focus to when user place value
Working fiddle
fiddle link
input[type="text"] {
color: #0090ff;
border:1px solid #0090ff;
}
input[type=number] {
color: #0090ff;
border:1px solid #0090ff;
}
/* When user focus */
input[type="text"]:focus, input[type=number]:focus, select:focus {
color: tomato;
border:1px solid tomato;
}
select {
color: #0090ff;
border:1px solid #0090ff;
min-width:150px;
}
<input type="text">
<input type="number" name="" id="">
<select>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
input[type="text"] {
color: #0090ff;
border-color: #0090ff;
}
input[type=number]{
color: #0090ff;
border-color: #0090ff;
}
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'm using this code to display an image link in the show view:
<%= link_to( image_tag("wikipedia.org.png", {alt: "Wikipedia", size: "24x24"}), #entity.wikipedia_url, {class: "plain", :target => "_blank", :rel=>"nofollow"} ) if #entity.wikipedia_url.present? %>
Which results in this when the mouse is over the image link:
The HTML that is generated:
<a class="plain" href="https://en.wikipedia.org/wiki/foobar" rel="nofollow" target="_blank"><img alt="Wikipedia" src="/assets/wikipedia.org.png" height="24" width="24"></a>
I would like to remove the hover color for image links, while retaining it for text links.
As such, I added:
a.plain {
&:hover {
text-decoration: none;
}
}
to the original scaffold.css.scss:
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
This did not remove the hover color. What do I need to change?
This is how I would do it in CSS:
a {color: #000;}
a:visited {color: #666;}
// `!important` overwrites whatever you or who else set before for the a element.
a:hover {color: #fff!important; background-color: #000;}
This worked:
a.plain {
&:hover {
background: none;
}
}
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;
}
}
Is it possible that when I move on the button mouse, change button styles?
When the cursor on the button, show this style:
input.button_p
{
color: #000000;
border-style: none;
}
When the cursor no't on the button, show this style:
input.button_a
{
color: #FFFFFF;
border-style:solid;
}
Thanks
You can use the :hover pseudo class, like this:
input.button_p {
color: #000000;
border-style: none;
}
input.button_p:hover {
color: #FFFFFF;
border-style:solid;
}
And the element just has the button_p class, like this:
<input type="button" class="button_p" />
input.button {
color: #000000;
border-style: none;
}
input.button:hover {
color: #FFFFFF;
border-style:solid;
}
Note that the :hover attribute in this usage isn't support by all of the browsers.. But it is supported in enough of them to not worry about it.
<input type="submit"> and <input type="button"> are not styleable on all browsers. You should be using <button type="submit">text</button> instead.