On IE11 the focus rectangle is very noticable..
I reviewed my css file and couldn't find any related style...
Does anyone encounter this? How can I solve it?
This focus rectangle is not present on earlier IE versions....
UPDATE:
Thanks to #Tim B James I have modified the css:
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
outline: 0;
}
input:focus, textarea:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
button :focus {
border: 1px solid #7ac0da;
outline-style: dotted;
outline-width: thin;
}
Thank you very much.
Use outline: none in your CSS rules for those buttons (or specify a different, less noticeable, outline). See https://developer.mozilla.org/en-US/docs/Web/CSS/outline
Related
I have researched the question, and from what I gathered, you can use -webkit-appearance: none; to do the trick. It removes the rounded corners off of the input, but the problem is that I can't set the border-radius after doing that. I want the search to have a 10px border radius.
Make sure that the appearance property is first and place the other properties after it. Try this:
body {
background: black;
color: white;
}
input[type="search"] {
-moz-appearance: none;
-webkit-appearance: none;
border: 0px none transparent;
border-radius: 10px;
line-height: 20px;
background: #efdefc;
color: #930;
padding: 3px 5px;
}
<input type='search'>
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>
Currently i'm running into a problem while i'm trying to get a link button styled.
I currently have the code for unclicked button:
a.linktest:link{
color:#00F;
border: solid 0.125em #5f9eA0;
border-radius:0.3125em;
text-decoration: none;
background-color:#FFFF33;
}
and
a.linktest:hover{
color: #FF0000;
border-radius:0.3125em;
border: solid #FFFF33 0.125em;
text-decoration: none;
background-color: white;
}
where it references class "linktest". The problem I run into is while I hover over the button it changes the color of the text,border, and background; the color of an unclicked button for text and border is not chaning into what i'm specifying.
Did I do anything wrong here?
edit: here's the relevant link i'm testing. http://jsfiddle.net/1zrq381o/2/
Just remove :link
a.linktest{ /* Remove :link*/
color:#00F;
border: solid 0.125em #5f9eA0;
border-radius:0.3125em;
text-decoration: none;
background-color:#FFFF33;
}
a.linktest:hover{
color: #FF0000;
border-radius:0.3125em;
border: solid #FFFF33 0.125em;
text-decoration: none;
background-color: white;
}
Check it working: Jsfiddle
Here is the JSFiddle
My HTML:
Register<br>
<input name="SignIn" type="submit" class="btn btn-splash-action" value="Sign In" alt="Sign In" />
My CSS:
.btn {
display: inline-block;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
text-decoration: none;
}
.btn-splash-action {
background: #09F;
border: 1px solid #0b0e07;
color: #ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size: 120%;
text-decoration: none;
padding-bottom: 5px;
}
Basically I've got a hyperlink with the CSS classes applied to it as a button element. However they visually have different widths and Firebug calculates the widths as different as well.
I've got the same problem in IE10 and FireFox 26.
If I'm applying the same styling to both elements, why do they look different?
EDIT:
Updated the JSFiddle to http://jsfiddle.net/DnaDG/1/
Trying to reset the padding, margin, and border using the .btn class but it still doesn't work.
In both cases the browser starts with default styles for the corresponding elements and then adds your styles to those. The <a> tag and the <input> tag have different default (starting) styles.
Here are the default styles Safari uses for <a> elements:
color: -webkit-link;
text-decoration: underline;
cursor: auto;
And here are some of the default styles for <input> elements:
-webkit-align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: buttonface;
border-right-color: buttonface;
border-bottom-color: buttonface;
border-left-color: buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
There are actually a whole lot more in addition to those. Also, different browsers have different defaults.
The default styling for each element is different... A hyperlink doesn't have a border for example, and there are some styles that you are not overriding, so the element retains those. Thus, not all the styles from your css will have an effect. Does that make sense? Hope this helps!
First of all: sorry for my bad english.
I've seen the problem only with Chrome, Opera and Safari, so I suppose it's a webkit problem.
I'm styling the buttons to give them a 'push' effect.
The problem is that if I click the button in certain points, at certains heights, it doesn't trigger the 'click' event.
I created a fiddle to better understand my problem; basically this is the css I'm using:
input[type="submit"], input[type="button"], button, .btn{
position: relative;
display: inline-block;
border: none;
padding: 4px 10px;
text-align: left;
color: #222222;
font-weight: bold;
background-color: transparent;
top: 1px;
bottom: 0;
vertical-align: baseline;
transition: none!important;
-webkit-transition: none!important;
}
input[type="submit"], input[type="button"], button, .btn{
background-color: #444444;
color: #FFF!important;
text-decoration: none;
text-align: center;
border-bottom: 3px solid rgba(0,0,0,0.75);
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .btn:hover{
top: 0;
border-bottom-width: 4px;
cursor: pointer;
}
input[type="submit"]:active, input[type="button"]:active, button:active, .btn:active, .btn.selected{
top: 4px;
border-bottom-width: 0;
bottom: 0;
}
.btn:hover, .btn:active{
color: #FFF;
}
I was expecting it near the top of the button (I increment 'top', so it's normal behaviour that if I move the button too much down the cursor is not anymore upon the button), but it also doesn't work under the text.
That, I hadn't expected.
At the beginning I thought that it was working only when the cursor was exactly on the button text, but if I click on the bottom border it works.
My best guess so far is that the 'moving' of the element interfere with the click event (in the same way as if I pressed the mouse button and moved the cursor before releasing it).
Just wanted to know if somebody had this problem and solved it.
On Firefox and IE10 I had no problem (only near the top, but that's expected behaviour).
Thank you.
Try this: http://jsfiddle.net/Lc9EW/
It uses a transparent border over the top area when in the active state:
margin-top: -5px;
border-top: 15px solid transparent;
border-bottom-width: 0px;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding;