I want to style radio buttons with pure CSS, no classes or IDs. Just input[type=radio].
I want to use a background image for unselected and selected.
However, the -vendor-appearance:none; doesn't work with Trident or Gecko. Just Webkit.
In those browsers you can see the background image as a background to the radio button but the button is still there rather than just displaying the image, how can I get rid of the button so just the background image displays. The fiddle: http://jsfiddle.net/7kScn/
You can use a CSS2 selector trick to connect to a radio group and display other stuff immediately after.
See: http://jsfiddle.net/7kScn/1/
It's just a basic example, but it operates on the premise of hiding the input field and then styling the label immediately after it, giving it the effect that it's the actual thing you're checking.
Is this of use?
input[type=radio]:checked {
border: 1px solid black;
}
I wrote a tutorial about how to customize checkboxes and radios with CSS only, as well as create on/off switches via styling the label and using it's :before and :after pseudoclasses. Maybe this helps :) Read it here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs
Related
I want to make animation where if user clicks/hover the button with border radius that this animation runs.
Animation: Line starts say from top left corner and starts travelling/tracing at the edge/border/parameter and then completes going in clockwise direction.
Sort of like line animation. I have seen it but i dont remember where, i saw it in css version, no svg.
Check out the answers on this post. It's probably not exactly what you're looking for but it might give you some idea.
How to animate border drawing with jQuery?
To make a CSS Animation on a Button is very simple. You just need to define a class on that button and in your CSS code define what happens when that button is hovered over. Now, if you don't want to hassle with writing CSS hover code, you could use ButtonAnimations, a website that provides users with several button animations with the code so that they can implement it into their websites. I use it almost every day when i'm coding a CSS & HTML site from scratch. I have provided ButtonAnimation's link. ButtonAnimations - Create amazing looking buttons and animations with CSS, no javascript required
But before you add animations to your button you need to create it first. (Let me remind you, ButtonAnimations provides you buttons to use beforehand)
<button class='test_button'> Hello StackoverFlow! </button>
And in the CSS do:
.test_button {
background-color: blue;
border-radius: 20px;
width: 200px;
height: 100px;
}
What this code will do is make an HTML Button and style it with CSS. The styling includes changing the width and height, changing the background color to blue and curving the edges of the button with border-radius: 20px;
Thanks for reading! Hope this helps.
Remember, check out ButtonAnimations - Create amazing looking buttons and animations with CSS, no javascript required if you want to present beautiful button hover animations on your website(s) just by simply using their prebuilt animations!
This might be helpful:
http://tympanus.net/Development/ProgressButtonStyles/
You can download the source from here:
http://tympanus.net/codrops/2013/12/12/progress-button-styles/
This is a little weird, but bear with me. This only affects IE10 and IE11, doesn't affect Chrome, FF, Safari, and IE9 and older. If you have a <label> for another element nested within a class that the :hover is assigned to, it will match that selector, even if you are not hovering over that element. In the example below, if you hover over the first div, both divs are highlighted.
<div>
<select id="min-price">
<option>A</option>
</select>
</div>
<div>
<label for="min-price"></label>
<select>
<option>B</option>
</select>
</div>
and this CSS:
div {
padding: 1em;
margin-bottom: 1em;
border-bottom: 1px solid red;
}
div:hover {
background: #f1f1f1;
}
div:hover > select {
background-color: #a3a3a3;
}
Example can be found here.
http://jsfiddle.net/0c67oew2/3/
Any anyone explain why this is happening?
I'm going to note before you read this answer that I am an engineer on the Internet Explorer team.
First of all, this is a really cool discovery. What you've stumbled upon is actually a "feature" (quite possibly a bug) of Internet Explorer that doesn't appear to exist in Chrome or Firefox. Let me try to break down an understanding of what is happening, why this is kind of cool, and what you can do to avoid complications with it:
Labels and input elements can become intrinsically related by way of the [for] attribute on a label pointing to the [id] attribute on an input element. As a result, when you click on a label, it can toggle a checkbox, or apply focus to an input field. This feature is often times leveraged to create progressively-enhanced radio buttons and more.
On a related note, when you hover over a label, the associated input element is also hovered. This is the case with Internet Explorer, Firefox, Chrome, and just about everybody else. But what Internet Explorer does differently is apply the hover bi-directional. So if you hover the associated input control, Internet Explorer also invokes :hover on the related label.
This is where things get cool. This allows us to create relationships like the one seen below:
Note here that the relationship is bi-directional, meaning any hover on an input is not simply a hover on itself and its ancestral tree, but also a hover on its associated label. And any hover on a label is a hover on itself, its ancestral tree, and its associated input. This brings us one step closer to understanding what's at play in your demo, and why you're seeing such bizarre results.
When you hover an element, you are covering its parents too. As an example, suppose we had a div with a button inside of it. Any hover on the button is inherently a hover on the parent div as well. You can't get to the children without first going through the parents as far as a cursor is concerned. The same rule applies here; when a label or input is hovered, so too are its parents.
In your demo you have a series of div elements with select elements and label elements inside. You're basing styles for the select elements on the hover pseudo-class of their parent div. So when you hover the select, it invokes the hover of its associated label, which causes the hover of its parent, which affects the styles of any nested select.
Subsequent Suggestion
While the [for] attribute allows you to place label elements just about anywhere, you should proceed in doing so only with special awareness to how this will affect selectors operating off of :hover propagation up the ancestral tree.
Before a complete solution can be given, I must ask why you are putting an empty label in a seemingly arbitrary location in the first place. What visual effect are you trying to achieve? I suspect we could accomplish the same visual layout with different markup.
Following Up from Here
I'm going to open a bug against this in our Internal database, because I get the feeling that this isn't entirely intentional on our part. Our aim, I believe, is to treat the behavior the same bi-directionally, rather than handling the two routes differently.
I recommend using :focus instead of :hover when dealing with form inputs. One reason for this is because if a user tabs through using a keyboard, the hover won't do anything, but a focus will.
.control .price:focus {
background: #a3a3a3;
}
I'm starting in CSS3, I'm trying to make a menu like this:
http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382
The idea is when you click the button, it hides the parent div and open the div daughter with the other buttons.
I saw this post CSS3 onclick activate another DIV's animation that points to the example http://jsfiddle.net/kevinPHPkevin/K8Hax/, code:
CSS:
#box1 {
display:none;
}
#box1:target {
display:block;
}
HTML:
Click Me
<div id="box1">test test</div>
that clicking on the link, it opens the div. But I want to click the link, hide the div, open the other and then do the reverse.
I would use only CSS3
tks to help
If you do want to use only css3 to do this you can use the Checkbox hack (http://css-tricks.com/the-checkbox-hack/).
It is far from ideal css usage however setting the boxes as radio boxes will do that quite well as each one deactivates the others. (ie you set "width:0px" by default, change to "width:200px" on check combined with "transition: width 0.5s;-webkit-transition: width 0.5s;" for a bit of animation).
In all honesty however you are better using jquery/javascript as the fallbacks for the checkbox hack are not ideal and it is not the stuff that css is really built to control.
Hope that helps,
Dan
This has been already answered you can check out:
CSS3 onclick activate another DIV's animation
This is a very simple technique using the '+' symbol only.Hope you find this useful.
I've run into a weird IE7 problem..
I have some standard CSS styled buttons with a background picture and a solid 1px blue border. They work as supposed except in IE7..
If I click inside a form element (textarea/input-field) it automatically adds a black border on my buttons.. Sometimes it also happends in other cases where elements are in focus/active..
You can see a simple example here
The thing is that I need the border on the buttons for styling reasons, so isn't there a way of disabling this behaviour in IE7 without removing the original border - either with CSS or jQuery?
I blogged about this issue here: http://markmintoff.com/2012/01/remove-internet-explorer-black-border-around-button/
Essentially you can use the following style to remove the offending border simply and effectively.
input[type=submit],
input[type=reset],
input[type=button]
{
filter:chroma(color=#000000);
color:#010101;
}
IE is highlighting the form's "default" button, the button that will be triggered if you press the enter key inside one of the form inputs. To disable the highlighting, you have a couple options:
Make the save button type="button" instead of type="submit", and handle the form submission by handling the button's click event in javascript. This was the answer to this related question (although ASP.NET is handling the javascript part behind the scenes).
Add a second type="submit" button as the first input in the form, then hide it with CSS. Note that display:none; will not cut it, you need to hide it by positioning it off screen with something like: position: absolute; top: 0; left: -9999px;. This was the answer to this related question.
jquery: $('input[type="submit"]').focus().blur();
javascript:
document.getElementById('save').focus();
document.getElementById('save').blur();
Hey I hve made this sample page for me http://jsfiddle.net/9S3a3/12/ , if we have a look at buttons , there is a slight shadow below them , i want to remove those shadows look, i tried resizing margin padding things but not able to do so . Any solution to this ??
----------Edit----------
I was talking about back button and gear button , see this http://i.imgur.com/pgwxr.png
The box-shadows are applied using the .ui-shadow class. So editing that CSS class like below will remove the shadows:
<style>
[data-role="header"] a.ui-shadow {
box-shadow: none ;
}
</style>
This will remove the box-shadow for any link with the .ui-shadow class that is located inside the data-role="header" element.
Here is a link to an updated version of your fiddle: http://jsfiddle.net/9S3a3/14/
On a side note, I remove the text and box shadow for most elements as it helps improve performance on mobile devices quite a lot.
I didn't get which buttons are you asking about, however, correct me if I am wrong. Add
#nav_header {
border-bottom: none;
}
to your CSS (http://jsfiddle.net/9S3a3/13/) to remove the shadow (border) under the Featured, Near, New buttons.