In IE 7 and lower I cannot get rid of the black border that appears when a input button has focus. I have tried:
input:focus {
outline-width:0;
outline:none;
border: 1px solid #FFF;
}
in CSS but it does not do anything. Any ideas?
You need to set border-color to transparent to remove the border in IE. Like this:
input:focus{
border: none;
border-color: transparent;
}
Read more about it here: http://bitesizebugs.wordpress.com/2009/08/17/border-none-not-working-on-text-input-in-internet-explorer/
I saw this from someone here.
the link:https://stackoverflow.com/a/39524745/12815454
.your_button_class:focus{
outline=0px;
}
Thank you Jordi!
Related
I would like to use the color #644220 for the border of my input field. I have tried it like this:
HTML
<input class="my_border" type="text">
CSS
.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
}
https://jsfiddle.net/9dss92v6/1/
When I use red or any other HEX code, it will work for me. It won't only accept the code #644220. And #644220 is an existing color as you see here.
Not even the RGB code (border-color: rgb(100, 66, 32);) is working.
What is wrong with it?
From MDN:
Note: The default value of border-style is none. This means that if
you change the border-width and the border-color, you will not see the
border unless you change this property to something other than none or
hidden.
Now I assume that browsers are not following this and they show some solid default border by default. [1]
You need to define a style for your border for example solid
border-style: solid;
Demo
[1] Was playing further with this, turns out that it's weird behavior I think from the browsers point of view. If am using a word like red or tomato as color names, it works but still, the color is not the one we expect it to be for example this vs this.
I will update this thread if I got any solid reasoning for this.
Edit 3:
Debugging further, it turns out that the default value Chrome sets is inset for border, i.e, border-style: inset;, which has grayish border which is like a shadow. Hence, your color does render but it mixes with the inset border being set by Chrome defaults. Now am not sure why the color is not overridden by the color declaration you have in your stylesheet, might be a bug.
Add border-style for it:
.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
border-style: solid;
}
You may want to combine the properties of your border in one line like this:
.my_border {
width:100%;
padding: 20px;
outline: none;
border: 10px solid #644220;
}
You can always change the thickness of the border. I made it in 10px so it will be visible.
I'm trying to making the border of the an image to be red when on hover, but it's not working for some reason. What am I doing wrong?
img: hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
Remove the space after the colon. It works in Chrome and IE11, at least.
img { border: 1px solid white; }
img:hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
EDIT: As mentioned in another answer, you may want to add a white border around the image so it won't shift when you hover over it. I have incorporated that in the code snippet above.
Cant comment, but we are talking CSS here, not HTML.
Add in a border for default to fix jumpy image. U could do
img { border: 1px solid rgba(0,0,0,0); }
I know there are other questions like this but I've tried everything they have suggested to no avail. This is a different question than Remove dotted outline from range input element in Firefox as I'm asking what is causing this rogue outline - the previous question answers how to get the colored outlines shown below.
This SO question (Remove dotted outline from range input element in Firefox) mentions the firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=932410 but it has since been marked as resolved but I'm still having this issue.
The input CSS is:
input[type=range]:-moz-focusring {
outline: 1px solid orange;
}
input[type=range]:focus {
outline: 1px solid green;
}
input[type=range] {
-moz-appearance: none;
}
input[type=range]:focus::-moz-range-thumb {
outline: 1px solid red;
}
input[type=range]:focus::-moz-range-track {
outline: 1px solid blue;
}
input[type='range']::-moz-focus-inner {
outline: 1px solid red;
}
The computed CSS from my browser is:
The rendered input in the browser looks like this:
From my testing it looks like :-moz-focusring and :focus are the same property - green outline, overwrites the orange.
-moz-appearance: none; on the element does nothing along with ::-moz-focus-inner.
You can see the range-thumb has a red border and range-track has a blue border but there is still the dotted outline. I tried the 'hide it behind a border' trick from the 2nd answer in the above SO question but then the white border is on top of the range-thumb like the dotted outline is in the picture. The outline-offset also does not extend on the left or right so the dotted lines on the end still show.
input[type='range']::-moz-focus-outer { border: 0; }
I have a form with multiple buttons where I use a JavaScript to submit the second button when some one presses enter.
This works great but if I open this form in IE the first button gets a blue border that tells the user "this is the button that will be pressed when you press enter".
Is there any way to remove that with CSS without overriding the rest of the button's styling?
Example:
<button onclick="javascript:alert('remove');">Remove name</button>
Think this should work (only tested IE10 on PC) for the border:
button { outline: 0; }
Want to remove the background (needed on WebKit/Blink)?
Add:
background: none;
Need to get rid of the border (removes background on IE10 too):
border: 0;
Use this code:
button { border:0;}
my solution (after a few months)
button:focus {
outline: 0;
box-shadow: none;
}
Use this code:
button {
border : 0px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
This may help you. Use following CSS properties:
input,
input:active,
input:focus {
outline: 0;
outline-style: none;
outline-width: 0;
}
#sideToggle:focus, #sideToggle:active{
outline: 0;
outline-style:none;
outline-width:0;
}
This solved my problem if anyone else visits the post. I added my own styles separately, as they really aren't central to the issue.
button{border:none; border-radius:4px; -moz-border-radius:4px;}
Simply add border-radius to develop the button look:
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
I have removed the border of form items on my site but I want them on my blogs comment form!
http://bradburyembroidery.com/houses4cash/blog/hello-world/#comments
I have tried:
#commentform input
{
border:thick;
}
but firebug keeps thinking its saying border:thick none;
Can anyone point me in the right direction?
Thanks
The border property is short hand for setting three different properties.
border-style
border-width
border-color
You have set the border-style to none, set it to something else.
#commentform input {
border: thick black solid;
}
The order for the shorthand declaration is width, style, color. So it'd be something like:
#commentform input
{
border: thick solid #F00;
}