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();
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/
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'm making a website in CSS and HTML (ofc there's JS, jQuery and XML but let's stick to the point) I want to make a button whats using <ul> and <li> to darken the webpage, I found this, code:
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /*enter code here important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
Anyone of you know how to make the CSS menu button to use the div inside of itself?
Here's a demo on CodePen to demonstrate the dimming effect and button: http://codepen.io/srig99/full/pDzgj. As user1618143 suggested, jQuery will make it easy for you to achieve this in your website. I have utilized jQuery in the demo as well.
You'll have to use javascript for this, and JQuery makes it pretty easy. First, put your #dimmer div directly inside the body of your html - putting it deeper runs the risk of only dimming part of your page, if any of its parent elements have absolute, fixed, or relative positioning. Second, add a click event on your button that unhides the dimmer. This is easy with a little JQuery (which I have not tested):
$('#dim_button').click(function() {
$('#dimmer').show(); });
(You'll have to make sure that the button has loaded by the time this code runs, otherwise it won't do anything. The best way to do this is to wrap it inside of a $('document').ready(function{}); )
Note that, in some older browsers, the dimmer div will, by sitting on top of your page, prevent the user from clicking on anything in it, potentially making your page unusable. If you're dimming the page in order to place a popup window on top of that, make sure that closing the popup also removes the dimmer. Note also that in most (all?) newer browsers, users will be able to click through the dimmer and interact with the page underneath, which may not be what you want.
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
I'm having trouble getting rid of the gray border in my button that has a background image. I tried to put together a public example on jsfiddle and I can't even get a proper example to work as the image sprite also fails to show up:
http://jsfiddle.net/3vPpt
So my two questions are:
1) Why isn't the background image showing up in my jsfiddle
2) And after we get the sprite to show up, how do I get rid of the gray border that is the original button? I only want the sprite to show up.
Try this.
It looks like you were applying the styles to the image element, not to the button. I doubt that you can apply a background-image style to an image element, even if it's a blank image. I think this may be because an image element is an inline element.
I also added border: none; to the button, which gets rid of the button border styling.
Note that you still may encounter weird padding/margin issues yet, but that can be for another question. Firefox, at least, like to apply an extra few pixels of padding in button elements even after you remove their border.
If its a form use input type image... or just use a div with onclick to submit
Try applying the "thumb_up" class to the button tag and remove the img from inside the button like this.
<button class="thumb_up" onclick=";return false;" title="I LIKE" type="button" class=""> </button>
And then add "border:0;" to "thumb_up" CSS
.thumb_up {
background: no-repeat url("http://www.mattsbits.co.uk/user_media/uploaded_media/sp2010_formatmap32x32.png") 0 0;
width: 200px;
height:200px;
border: 0;
}