This question already has answers here:
Internet Explorer button:active inner-padding
(3 answers)
Closed 2 years ago.
Take the code snippet below.
The button in the example should become black on mousedown (:active) - which works pretty fine - but IE11 additionally shifts the button text by some pixels to the bottom right if the mouse is on the button (:hover). You can see this by pressing the button and moving the mouse away from the button while holding down the mouse - the button stays active but as soon as the cursor leaves the button, the text is shifted back:
All other browsers (even Edge) work as desired.
As in IE11's dev tools only the :hover pseudo class can be applied, I have no idea where this shift comes from. I already tried to specify padding and margin for the button but without success.
input[type="button"] {
width: 200px;
height: 3rem;
background: #10275e;
border: 1px solid white;
color: white;
font-size: 1.2rem;
}
input[type="button"]:hover {
color: #10275e;
background: white;
}
input[type="button"]:active {
color: white;
background: black;
padding: 0;
}
<body style="background:#10275e">
<input type="button" value="Press me" />
</body>
Can anybody tell how to make IE11 not shift the button text on :active and :hover?
This has nothing to do with flex style, so why should it be a dupe?
Found a solution on another thread (from this question) !
The solution needs some changes on your code (the input need to be a button element), because we want to use a span inside the button.
button {
width: 200px;
height: 3rem;
background: #10275e;
border: 1px solid white;
color: white;
font-size: 1.2rem;
}
button:hover {
color: #10275e;
background: white;
}
button:active {
color: white;
background: black;
padding: 0;
}
button > span {
position: relative;
}
<body style="background:#10275e">
<button><span>Press Me</span></button>
<body>
That is the pressing effect which is added by the Internet Explorer by default.
There is no way to disable or remove it.
If you do not want that effect than below is the another work around that you can try with IE.
<!DOCTYPE html>
<html>
<body>
<h2>Test Button Element</h2>
<img src="https://www.freepngimg.com/thumb/submit_button/25387-5-submit-button-clipart-thumb.png"/>
</body>
</html>
Output in IE 11:
Here we replace the button with anchor tag which has role of button and we use the image which looks like button inside the anchor tag. So when user click it in IE, they will not get that pressing effect.
Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
I'm trying to use the element+element-Selector to change the CSS for an element following a button.
The following snippet works in Chrome, Edge, Firefox - not in Safari for MacOS:
.button:focus+.change{
color: red;
}
<p>When you focus the button, the text color should change to red.</p>
<button class="button">click me</button>
<div class="change">Change color</div>
Any ideas, how I could resolve this problem?
Thanks for your help.
There is bug in safari. It will not give focus event on click in safari. Instead give focus event on TAB click.
Or :active will give effect. But, upto when mouse press. When you release it will remove effect.
.button:focus+.change, .button:active+.change{
color: red;
}
Fiddle Link
If you have 'a' tag, you can just add "tabindex" attribute to HTML tag to fix this issue on Safari. For example:
<a href="#" tabindex='-1' />
Read more about tabindex here
.buttongroup button {
margin-bottom: 10px;
display: block;
border-radius: 10px;
width: 100%;
background: #f1f2f2;
color: black;
border: none;
height: 45px;
}
.buttongroup > button:focus {
background: #25a0da !important;
}
/* This worked for me in safari and firefox. ATB
.buttongroup > button.selected {
background: #25a0da !important;
}*/
<div class="buttongroup"><button ga-tag="input" data-value="patient" class="selected">Hey</button><button ga-tag="input" data-value="caregiver" class="">There</button></div>
I have a CSS rule for input like this:
input {
border: 1px solid black;
}
The problem is that checkboxes in IE (have tested on IE 8 and 9) and Opera also inherit this border and instead of showing the default style they show their custom mode for checkboxes with white background and black checks like this:
instead of the native style, like in Windows 7 with gradient-grey background and dark blue checks that are shown in Chrome and Firefox:
I would like to keep the border for the input-rule in the CSS, but I have a class called "checkbox" that I put on all checkboxes like this:
<input type="checkbox" class="checkbox" />
Is there any way to reset the border style with the .checkbox rule?
I have tried:
.checkbox {
border: none;
}
which works in Opera to revert to the default style, but not in IE. I have also tried many different combinations of:
.checkbox {
border: 1 none transparent;
}
but none of these seems to reset to the default style of the checkboxes in IE.
Is it possible to revert the default style for checkboxes in IE do without removing the border for the input-rule and instead use the .checkbox class?
In many browsers, it's not possible to reset the checkbox back to the default native style.
This is probably the reason why CSS resets generally do not include a rule to this effect:
input {
border: 0;
}
The most compatible technique is to do this:
input[type="text"], input[type="password"] {
border: 1px solid black;
}
and explicitly list every type of input you wish to style.
See: http://jsfiddle.net/EPpJ9/
This will work in IE7+ and all modern browsers.
You could also do this more neatly with the not() CSS3 pseudo-class, but that doesn't work in IE8, which is a deal breaker for me:
input:not([type="checkbox"]) {
border: 1px solid black;
}
In case you are still wondering there is indeed a way to style checkboxes and have it work in most browsers including IE. And you only need some css and just a little javascript and jquery. Works in IE6+
First make your checkbox like this.. Only add a label element with the for element pointing to the id of the checkbox.
<input id="mycheckbox" type="checkbox">
<label id="mylabel" for="mycheckbox"></label>
Next include some css:
#mycheckbox {
display: none;
}
Draw your checkbox using your label control, here is one I made:
#mylabel {
float: left;
margin-top: 11px;
background-color: #fff;
border: 1px solid #000;
display: block;
height: 12px;
width: 12px;
margin-right: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background-position: left center;
}
You have to create a look for when the box is checked:
#mylabel.checked {
background-color: #808080;
}
Finally some jquery:
$(document).ready(function () {
$("#mycheckbox").change(function () {
if ($("#mycheckbox").is(":checked")) {
$("#mylabel").addClass("checked", "checked");
} else {
$("#mylabel").removeClass("checked");
}})
});
Don't forget to include the jquery libraries (put this in your head tag):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check out the fiddle to see it in action:
fiddle
Couldn't you include ie8-js to make IE8 recognize not() CSS3 pseudo-class?
http://code.google.com/p/ie7-js/
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}
this will be quite difficult to explain. I hope I'm able to.
I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:
.button{
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #999;
cursor: pointer;
text-decoration: none;
color: #606060;
}
Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings
background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;
The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like
<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>
On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.
To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg
On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg
Does anyone have any suggestion on how I could fix this??
//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.
This is an old bug. You need to add overflow:visible to the button. There is more here:
http://jehiah.cz/archive/button-width-in-ie
and here:
http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/
Just try a css reset of submit button first (at the beginning of css file). For example margin, padding etc set to zero.
I am not quite sure how apply reset for submit buttons ..
but you can try following and test
/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td { margin:0;padding:0; }
body { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p { font-size:100%;font-weight:400; }
ol,ul { list-style:none; }
caption,cite,code,th { font-style:normal;font-weight:400; }
fieldset,img { border:0; }
caption,th { text-align:left; }
:focus { outline:1px dotted #eee; }
table { border-collapse:collapse;border-spacing:0; }
hr { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button { cursor:pointer; }
As per #Andrew's answer you can try * html input { overflow: visible; } also.