I'm trying to apply a theme to my buttons (input type="button", input type="submit" and button) , but I haven't been able to get it to work, at least not in all of them, just in one, the "Add" button. According to this page, the only markup I need to apply a theme to a button , is simply this <button>Button Label</button>. , but it just doesn't work.
I added a working demo on JSFiddle
I really hope you can help me out with this
You need to apply the button() function for each <button> or <input> that you want styled as a button. You could add the following to your code:
$("button, input:submit, input:button").button();
Which would apply the jQueryUI button styles to all button elements and input elements of type button or submit.
I updated your example: http://jsfiddle.net/hjYyb/
Related
there is a button that when it is clicked, It scroll to the bottom of the page
<form action="#demo-section">
<button id="demo" >demo</button>
It is linked tho this div as below:
<div id="demo-section" >
but when I click a page, it refresh and then go to bottom and also ? in the address bar:
http://xxxx.xx/?#demo-section
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
demo
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
I am styling some radio buttons to make it look unique. But i got problem, the problem is when i give it position, it does give me look which i want, but i am unable to click on the radio button labels to act them as radio button. Here is my codepen and code that is making my input radio button non clickable. I am unable to choose either as my radio button is off screen. It seem like i cannot select anyone of them.
input[type="radio"]{
position:absolute;
left:-9999;
}
Your codepen example has a typo: label for="male" is also used for the female case.
Once that is fixed I can click anywhere on those labels.
how I can set input status checked on hover only via Css?
Actually is the setting on click but i need it on hover, how I can do that?
here is the example
Well not possible...with css you can't create a environment in which radio input be checked on hover because in css you can style the elements but you cannot fire any event.
You have to use little JS to achieve it.
Here is the code
$('input').on('hover', function(){
$(this).trigger('click');
});
Above code will trigger click on hover of same element.
When I search for a css button generator they always have code that styles an anchor.
The Button
But I'm wondering why they don't ever try to style a generic button:
<input type="button" value="The Button" />
is it because it's harder to style an input of type button?
The styling will make buttons and anchors look the same. However the functional aspects are what make you decide to use a button or a link.
I would recommend using a link if you are going to follow a link, and a button if you want to submit a form or perform an action, say AJAX call.
Typically the input buttons are going to look like whatever the users computer defaults to for a button. Using anchor tags along with image sprites lets you have more control over what the "button" is going to look like.
This is probally small question for a pro.
i want to know if i replace input submit button with button (type=submit), would it still be trigger on enter (keyboard) and if yes, then which browser wont trigger it?
<button type="submit"><span>i was replaced from input button</span></button>
span was added just for css fancy button style
It should be triggered in all standard compliant browsers, since type="submit" creates a submit button:
Buttons created with the BUTTON
element function just like buttons
created with the INPUT element, but
they offer richer rendering
possibilities:
same thing, the button allows you to put content, like text or images