I am trying to make an <input> text field with the color code #7d5993, but I see that the top and left are black and the bottom and right are my color. Is there any way to make the entire border my color like how the <textarea> would look?
Here's my code.
You must add property border-style override default border style of the textarea and input
border-style:solid;
You can check this fiddle
You have to define border-style:solid also like this:
input{border:2px solid red;}
Check this http://jsfiddle.net/7kE7R/15/
Try this
input{border: 1px solid #7d5993; border-width:2px;}
input:focus{border: 1px solid #5190dd; border-width:2px;outline:none;}
textarea{border: 1px solid #7d5993;border-width:2px;}
textarea:focus{border: 1px solid #5190dd; border-width:2px; outline:none;}
you have to use
border-style:solid
check out my solution here
http://jsfiddle.net/fvN8T/
Related
I was wondering how to get these type of lines on a table
When I try to give the the <table> a "border right" property, it gives broken space between each cell.
border-right: 2px solid gray ;
HTML
<tr class="bordered">
CSS
.bordered
{
border-right: 2px solid gray ;
}
replace gray with any color you want like #cccccc
Do you want something similar like this example
.td
{
border-right: #ccc 1px solid;
}
I think what you are looking for is a vertical rule. Html has a horizontal rule
<hr>
However, it does not have a vertical rule. You can accomplish this with a bit of css though. For example
<div style="border-left:1px solid #000;height:500px"></div>
In below example I have two divs:
Both have the same content and almost the same style, except that the second div has one more style:
border: 1px solid black;
The problem is that this border is doing a resize of the internal content and I don't want this. I want to put a border on some divs on the page dynamically during the page load, but without chage any measures or changes in the content.
Has a way of doing this? I can use javascript if necessary, but a solution that only use css will be more apreciated.
Instead of border use outline
div.border
{
outline: 1px solid black;
}
DEMO
You can also use a transparent border, like: border: 1px solid transparent;
Then apply any other color you want.
You can use transparent borders, then when you will apply border color the size will remain the same. Here is a fiddle
html
<div>
</div>
css
div {
border:2px solid transparent;
width:200px;
height:200px;
background:#eeeeee;
margin:10px;
}
js
$("#red").on('click',function() {
$("div").css("border","2px solid red");
});
$("#transparent").on('click',function() {
$("div").css("border","2px solid transparent");
});
You have 2 options.
Use css : 1px solid transparent; and
Use css : box-sizing:border-box;
I want to add an extra border on the top of the .menu div.
Firstly i added top and bottom border using box-shadow. and then another regular border using
border-bottom:
border-left:
border-right:
now i want to add a border next the top white border(created by box-shadow) same as the regular border just like this.
here is the link for my current progress
Use css outline for this.
Check This- JSFiddle
FIDDLE
You don't need to specify border-top, border-bottom, border-right, border-left. Just simply specify like this border:1px solid #b8b7b7;. You are missing border-top in your css
.menu_area
{
width:960px;margin:0 auto;height:42px;box-shadow: 0 -4px 0 -3px #FFFFFF, 0 4px 2px -2px#ededed;
border:1px solid #b8b7b7;
}
Try this
<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
outline:green solid thick;
}
</style>
</head>
<body>
<p>Here you go</p>
</body>
</html>
Just like Beginner said, you don't need to specify the side (top, right, left, bottom) when you want to apply the effect to all sides, just boder: [styles]; it's enough in your css.
I have a 'special' table on one page, that's borders I would like invisible. I'd like it to differ from standard css rules. Here is a screenshot:
before http://eliteshift.com/redbeancoffee/images/before.jpg
And here is what I want:
after http://eliteshift.com/redbeancoffee/images/after.jpg
I've made a second 'class' called 'award', and I can attribute certain traits (such as width), but I cannot for the life of me remove the boarder.
What's the css for a transparent border?
I've tried:
table.award {
border-collapse: collapse;
border-spacing:0;
width:60%;
}
border-color: transparent; will make it transparent.
border:none; will remove the border, which sounds like what you actually want in this case.
From the sounds of it, do you actually need a border? Would the following work?
table.award{
border: none;
/*other css attributes omited*/
}
I find that border: 2px solid transparent doesn't make it truly transparent all the time.
To make sure that you have a transparent border with a fixed width, use margins instead:
margin: 2px
will do the trick
I find that I have to use the following style to specify a style for my right border:
border-right: 1px solid black;
When I tried to incorporate this information into my border element like this, it didn't work:
border: 0 1px solid black 0 0;
Assuming my syntax is wrong, is there a way to specify the right border style using only the border element?
No, for different borders you have to use border-right and so on, but can specify all of them then override:
border: 0px;
border-right: ...
Nope. Border sets all of them.
http://www.w3schools.com/css/css_border.asp
You'll need to use one that's specific to your need.