I have the following problem - my textarea and input fields are semitransparent, but I can't remove the border around them completely. I tried making transparent borders or specifying border: none; but they do not disappear (see the image below)
Anyone knows a good solution?
Thank you!
Try this :
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
First, be sure that the borders are indeed applied on textarea, input elements and not other elements such as their parents.
Then, make sure that the border styles are not applied with !important in css files on textarea, input elements.
Finally
$('textarea, input').css('border', 'none !important');
Why are you asking for javascript ?
Try this :
// No border
border-width: 0;
// No box shadow
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
// No outline (ex: blue shadow on Mac OsX on focus)
outline: 0;
If you have a class with the specific rules you can use:
$("#idTextarea").addClass("classYouNeed");
if you have only remove the border
$("#idTextarea").css('border', 'none');
Even if you want to use only JavaScript:
document.getElementById("#idTextarea").style.borderStyle = "none";
Perhaps a bit heavy-handed, but rather than "remove" the borders, why not simply specify their colour as being the same as the background colour?
Related
I have two buttons next to each other. One of them has a background and the other has a transparent background with a border. The problem is the border is visually outside the button, making it slightly larger than the primary button.
I have searched and come across many solutions for this, but my question is what is the best practice to solve this?
Thanks!
use box-sizing
box-sizing: border-box;
This way the padding, border will be inside.
You have two options, one is to use outline and outline offset, like this:
button{
outline: 1px solid red;
outline-offset: -1px;
}
Or you can use an inset box-shadow, like this:
button{
box-shadow: inset 0px 0px 1px red;
}
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 have managed to remove the text area border but I want it so the user cant see a border even when they click on it. This is my css as of yet.
.comments{
border: 0 none #FFF;
overflow: hidden;
}
I tried making the border transparent, I tried this also but it doesn't work either, also tried it with other attributes active etc.
.comments:focus{
border: 0 none #FFF;
overflow: hidden;
}
Is it possible to remove the border when focused on?
The border isn't visible until the textarea is clicked on btw. So border none does work
You need to set outline:none for the textarea.
.comments:focus{
border: 0 none #FFF;
overflow: hidden;
outline:none;
}
Js Fiddle Demo
textarea, input { outline: none; }
I have both textarea and input in my form. The border of input is shadowy, while the border of textarea is solid. If I put in border: none; for textarea, then there's no border at all. I want them to be the same. Can I do it?
For "shadowy" borders, you might be better off getting rid of the borders altogether and using box-shadow instead. Here's a simple example:
input, textarea {
border: none;
box-shadow: 0 0 15px rgba(0,0,0,.4);
}
I have designed my submit buttons using CSS. In any Webkit or Gecko browser it works perfectly, but Internet Explorer 9 adds padding to the button's text when it is pressed down. In addition, you can see this stupid dotted border. It looks like this then:
http://img6.imagebanana.com/img/tkp7l8m3/button.png
The special background image which I have specified in CSS for input:active is only shown in IE, if the button is clicked in the very thin area between the button's border and this dotted border. If the button is clicked in the middle it keeps the hover-background although it is pressed down.
Can anyone help me remove this extra padding and the dotted border?
Thanks in advance
Qoguth
To get rid of the dotted border you can use pure CSS:
button { outline: none; }
As for padding when clicked, I fear it's part of the internal browser behavior that can't be changed.
Both of the answers given so far are incorrect in an important way. You should only hide the keyboard focus outline on :active, hiding it on :focus too hurts keyboard navigation.
button:active { outline: none; }
As has been stated, the increase in top-left padding is not overridable.
You could try:
/* Swap 1px 6px for your desired top+bottom and left+right padding. */
button { padding: 1px 6px; }
button:active { outline: none; padding: 1px 6px; }
Presuming you actually want padding and not some other property.