I'm using Zend Framework and I have a form input button with a style that I defined.
I need to replace the main data-theme once the button gets pressed.
I have in mind something like this:
$this->form->go->setAttrib("onclick", "this.data-theme='new_theme'");
.. but is not working.
any ideas??
thanks!
It depends if you mean 'on press' or 'after'; if on press, then the :active psuedoclass (as Simone states) is correct; if you want the different style to be persistent after you've clicked the button, then the :visited psuedoclass should work (although having said this, I'm not sure if :visited is only valid for a href links; if so, you could style a link to look like a button, which is fairly common)
You could just declare the new style in your stylesheet, with the :active pseudoclass.
Should be something like
input[type=button]:active {
/* type here your rules, i.e. background-color:red; */
}
Hope it helps!
Related
I'm trying to change the class name of my header when I hover over it. The class name when NOT hovering is ".l-header.pos_fixed.bg_transparent.shadow_wide", but I'd like to rename it when hovering to ".l-header.pos_fixed.bg_solid.shadow_wide".
Is this possible?
EDIT: Maybe a bit more background information: I want to change the header of https://pinkypromise.pictures to the header of, for example, https://pinkypromise.pictures/contact when hovering on the home page.
To answer your question, yes, it is possible to change class names based on events (hover, in this case), but you will need javascript for that. You can't achieve this with pure css.
As others have mentioned, it is usually a better approach to have a css rule with the :hover pseudo-class. But also be aware that you might have problems with the intended result in touch devices.
A good source of information for these rules is Mozilla Developer Network. Please have a look at the full documentation for :hover's pseudo class on MDN.
Sorry I thought only the logo should change.
I see you site is using jQuery.
When I enter this in the console it seems to work fine:
jQuery('.l-header.pos_fixed.bg_transparent.shadow_wide').mouseenter(function() {
jQuery(this).removeClass('bg_transparent').addClass('bg_solid');
}).mouseleave(function() {
jQuery(this).addClass('bg_transparent').removeClass('bg_solid');
});
You don't need to change the class name on hover, just specify the styles that you want to apply when you hover:
header:hover {
// place the styles that make the background solid here
}
I have a JavaFX button that has been set as Default Button so the user can select it with the Enter key. Currently, it has a blue background:
But I'd like to make it look like a normal button:
I took a look at the JavaFX CSS Guide and it looks like there's only one feature to override (-fx-base).
But changing this feature has unpredictable effects—sometimes it eliminates the button's gradient; sometimes it makes the button transparent.
Is there a simple way to just get rid of the Default Button styling?
My guess is that you are looking in the wrong style sheet. The old default style sheet caspian.css was replaced with modena.css. So setting default value for -fx-base from modena.css should fix the issue:
.button:default {
-fx-base: #ececec;
}
Is there a way - or anyone knows if someone already made this available - a way to style links in the form of buttons in the aristo style?
http://aristocss.com/
Using this CSS -reform a regular link to the style of a button?
You can more than likely copy all the CSS for those buttons and just use it on a link. In fact you'd probably be able to rip out a bunch of reset stuff as buttons often have all sorts of browser defaults which a link doesn't have.
So change:
button {
// Cut
}
to:
a {
// Paste
}
Hope that helps :)
(The css you need by the way starts right at the top of this file: http://aristocss.com/css/aristo.css)
Sure - just grab the CSS they're already using, change it from button to a.btn, add display:block, give your link a class of "btn" and you're all set.
I'm doing an image button rollover that has 3 stages (normal, hover, active).
I have the normal and hover stages working, however I can't seem to get the 'active' to work. That is, I want the image to stay on the active lever after it has been clicked.
Here is what I have:
http://jsfiddle.net/pufamuf/Q3YpU/1/
Thanks! :))
What you're trying to do will require JavaScript. Your CSS is fine, but when the link is no longer active, the :active selector no longer applies, and there's not much you can do about that.
You could (for example) use JavaScript to respond to the click event by adding an extra CSS class to the tag, and use that class to style the link identically to your :active link. For example, if your JS adds the class "clicked", your rule might look like
#emailUs:active, #emailUs.clicked
{
background-position: 0 -62px;
}
Many (most?) developers would probably use jQuery for something like this.
The :active pseudo-class only applies while the element is in the process of becoming activated. Once the mouse click is released the element no longer falls under the :active category.
In order to produce your expected behavior you will need to use some Javascript.
Use jQuery addClass on click event
If you could use JavaScript, this would be simple. Come up with some class name (e.g., active), and add it to your :active declaration:
#emailUs:active, .active
{
background-position: 0 -62px;
}
Then use JavaScript to listen for the click event on that link, prevent the default action, and add/remove the active class from the element as necessary.
However, if JavaScript isn't allowed, there's a much messier way to get what you want, which probably won't be feasible on a live site.
Change the link's href so that it points to itself:
<a id="emailUs" href="#emailUs" title="Email Us"></a>
Then use the :target selector in your CSS:
#emailUs:active, #emailUs:target
{
background-position: 0 -62px;
}
Keep in mind that the second solution has some caveats that go with it:
It tries to reposition the page so that the link is at the top of the screen
There could be a bunch of issues if you're already using the fragment identifier on your site
It won't work at all in IE6-8
I have the label like <label>name:<input></label>
and the css like
label:active{/*properties*/}
I'd like the properties to be applied to name inside <label> when I click on <input> it gets applied but it looses focus to the <input> soon after I click it.
here is an example: http://jsfiddle.net/GuCk4/2/
If I understand your question, you could just do this... without changing any HTML.
label, input, input:focus{
font-weight: bold;
}
Example: http://jsfiddle.net/jasongennaro/GuCk4/4/
BTW: you don't really need input:focus here... at least in my tests on Chrome. You may need it for other browsers.
EDIT
Okay, after #Mohsen's comment, I reread the question.
What you want is a parent selector in css. This does not exist. Since css relies on the cascade, it applies styles down the DOM not up it.
So, the only way to do what you want is to rewrite your HTML, as per #Mohsen's answer, or use some jQuery, like so
$('input').focus(function(){
$(this).parent().css('font-weight','bold');
});
$('input').blur(function(){
$(this).parent().css('font-weight','normal');
});
Example 2: http://jsfiddle.net/jasongennaro/GuCk4/5/
label{display:block}
label:active,label:hover,label:focus{font-weight:700}
works how you want it to.
#steveax is correct, don't put the label after the input unless it's a checkbox
For anyone using jQuery 1.7+, here's a nicer bit of jQuery to toggle an "active" class on a label wrapped around an <input type="checkbox">.
$("body").on(
"click",
"label input[type=checkbox]",
function(){
$(this).parent("label").toggleClass("active");
}
);
Demo: http://jsbin.com/iHaJeCe/3