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);
}
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 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?
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; }
It's just a standard HTML 'hr' tag but the line is displaying with an odd extra pixel. My only CSS is:
hr {margin:0%;line-height: 100%;}
Apparently I don't have enough rep to include images of the issue, so you'll have to go off my description.
Use the height property instead of the line-height property and that should fix your issue. Here's some additional information on styling hr tags. Cross-Browser hr Styling
It's in the comments now, but here's the fix that worked for him.
hr { border:none; border-top:1px #CCCCCC solid; height: 1px; }
The HR uses a shadow on it in most browsers. You should override the style using css or something like:
<hr noshade size="1" />
Update:
noshade is deprecated... See http://www.electrictoolbox.com/style-html-hr-tag-css/
Css Solution:
hr {
border: none;
background-color: #000;
color: #000;
height: 1px;
}
Cross-browser solution with CSS:
hr { height: 1px; background-color: #000; border: 0 none; }
How I change the thickness of my <hr> tag
jsFiddle:
http://jsfiddle.net/6nXaN/
An hr tag is just rendered as a 1px tall empty element with a border style of inset (change the height of the hr a few pixels to see what I mean). The extra pixel comes on the left due the way the inset border is rendered. If you add:
hr { border-left: none; }
...then you can maintain the inset look of the default hr without the extra pixel. Making the border-style solid, or making it a black background colour may make your hr too dark. I prefer the subtlety of the above approach.