I want a red border around my input text fields in a html form. But using css
input { border: 1px solid #d66 }
also puts a red border around my buttons (which I don't want).
input.button, input.submit or input.text and anything inside { } doesn't do anything.
How do I change the border around a text input only, and how do I change the font in the submit button only? I'm using IE9.
Thanks!
To target textboxes, use
input[type="text"] { border: 1px solid #d66 }
There are a lot more attribute selectors available.
Have a look at http://css-tricks.com/attribute-selectors/
What you need is an attribute selector:
input[type="text"] { border: 1px solid #d66 }
This selects the input of type "text."
You can also use other attribute selectors to select other elements:
input[type="submit"] { border: 1px solid #d66 }
input[type="checkbox"] { border: 1px solid #d66 }
But also be aware that these selectors are not supported by IE7 and lower.
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 7 years ago.
Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
}
This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:
textarea:focus, input:focus{
outline: none;
}
You may want to add some other way for users to know what element has keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:
*:focus {
outline: none;
}
⚠️ Accessibility warning
Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject
The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:
.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
input:focus {
outline:none;
}
This will do. Orange outline won't show up anymore.
<input style="border:none" >
Worked well for me. Wished to have it fixed in html itself ... :)
I've found the solution.
I used: outline:none; in the CSS and it seems to have worked. Thanks for the help anyway. :)
this remove orange frame in chrome from all and any element no matter what and where is it
*:focus {
outline: none;
}
Solution
*:focus {
outline: 0;
}
PS: Use outline:0 instead of outline:none on focus. It's valid and better practice.
Please use the following syntax to remove the border of text box and remove the highlighted border of browser style.
input {
background-color:transparent;
border: 0px solid;
height:30px;
width:260px;
}
input:focus {
outline:none;
}
Set
input:focus{
outline: 0 none;
}
"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]
This will definitely work. Orange outline will not show anymore..
Common for all tags:
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
input:focus {
outline:none;
}
I found out that you can also use:
input:focus{
border: transparent;
}
Im working on a html linter using css.
Reference: https://bitsofco.de/linting-html-using-css/
I like the idea of highlighting elements that have inline styles like so:
*[style] {
color: red !important;
border: 5px solid red !important;
}
However, I do have certain instances where I have to use inline styles, ie canvas elements.
How do I use the :not selector with the *?
Can I have multiple :nots, ie :not(canvas):not(form), etc
What you have works and excludes the canvas. And yes, you can chain multiple :not()s like that.
* {
border: 1px solid black;
}
*[style]:not(canvas):not(form) {
color: red !important;
border: 5px solid red !important;
}
<canvas style="foo">canvas</canvas>
<form style="foo">form</form>
<div style="foo">div</div>
the :not() rule matches anything not matching the subrule. The subrule is a valid css selector. writing [canvas] will match any element with a canvas attribute, so this isn't what you want.
The correct usage is:
*[style]:not(canvas):not(form)
Here is my HTML:
<input type='submit' class='clsname'>
This CSS makes a blue border for that input: Demo
input{
border: 1px solid red;
}
.clsname{
border: 1px solid blue;
}
But this makes a red border for that input: Demo
input[type='submit']{
border: 1px solid red;
}
.clsname{
border: 1px solid blue;
}
I don't know why exactly, But I know it is related to the priority of selectors. I think input[type='submit'] has a bigger priority than classname, but input doesn't have a bigger priority than classname.
Now I have a selector like this: input[type='submit'] and I need to give a bigger priority to class name. How can I do that? I mean something like this:
input[type='submit'] { }
.clsname { /* bigger priority here */ }
Note: I can do that by !important, But I want to know is there any approach else? Because using !important is not recommended.
It's specificity. Read more here on W3.
Use input[type='submit'].clsname, .clsname selector.
Here's the fiddle.
You can overqualify your selector intentionaly to give it higher priority.
input[type="submit"].clsname
I have an input field CSS like this:
input {
background: white;
border: 1px solid #bbb;
box-shadow: none;
}
input:hover {
background: white;
border: 1px solid #999;
outline: none;
box-shadow: none;
}
input:focus {
outline: none;
box-shadow: none;
border: 1px solid #555;
}
My problem is that when I give the input focus the hover effect takes over if my cursor is also over the <input>.
Is there a way I can make the hover effect work only when the input does not have focus?
With the code you've provided I can't reproduce the issue, which leads me to believe that this is a specificity problem. (If you're not sure what that is, I wrote a blog post about specificity earlier today: What the heck is specificity?)
With the code you've provided, both input:hover and input:focus have a specificity of 011. As long as input:focus is included after input:hover in your stylesheet then the focus style will always override the :hover.
First JSFiddle demo.
If your :hover has an extra selector, its specificity will be higher than the :focus selector. For instance:
input.example:hover { ... }
input:focus { ... }
Second JSFiddle demo.
With an extra class, the :hover selector above now has a specificity of 021 and will override the :focus selector which still has a lower specificity of 011.
Ensure your :focus selector has higher specificity and your :hover will not apply when the element is focussed.
Say I have a
<a class="myclass" href="foo.htm">Click Here</a>
and in css something like this:
.myclass
{
border: 2px solid #000;
padding: 1em;
}
so the <a> looks like a button but it only operates when clicked on the text, not in the whole box. How can I make so that the box also "catches" onClick?
Block will not work well unless you float the element and give it a fixed width. I think "inline-block" would work better.
.myclass{
display: inline-block;
border: 2px solid #000;
padding: 1em;
}
You can see it in action here: http://jsfiddle.net/2tmzL/
Browser support for inline-block is pretty good: http://caniuse.com/inline-block
Wrap the anchor tag around another container element
<a class=".." href=".."><div>Click here</div><a>
< a > is an inline , you have to transform it to a block, try this
.myclass:
{
display:block;
border: 2px solid #000;
padding: 1em;
}
You need to set the css property display: block or inline-block (depending the case...) for your a element.
I seem to be able to click the entire link. Make sure you remove : after .myclass. Also if it's still not working you may like to try adding display:block;
Alternatively in html5 you can wrap the a tag around a block element. This will work in older html though it's not correct.
.myclass
{
border: 2px solid #000;
padding: 1em;
display:block;
}
The issue is that a's are inline elements, and padding doesn't work the way we expect with inline elements. Change the a's to a block level element, and everything should work as you expect (note the removal of the ":" in the CSS declaration, that shouldn't be there):
.myclass {
display: block;
border: 2px solid #000;
padding: 1em;
}