UPDATE: Fixed with margin-bottom: 0px;
But somehow it still affect the text box size. Larger.
Then if I use outline instead of border, the border-radius will not work.
I have a problem with the these elements when one of them is clicked/focused,
it's affect the other element's position. It's because the border is larger than the normal size. So how to fix it?
For example: Click on the text area, it'll make the text input move away.
Note: I don't want to use box-shadow. No need to use position property actually.
HTML
<h3>Text Area</h3>
<textarea></textarea>
<br />
<h3>Input: Text</h3>
<input type="text" />
CSS
input{
background: #fff;
border: 1px solid #B7B7B7;
font-size: 15px;
margin: 2px 0;
padding: 5px 5px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
input:focus, textarea:focus {
border: 3px solid #507ad5;
margin-bottom: 0px;
}
textarea {
width: 300px;
height: 100px;
}
UPDATE: See and test it directly: http://jsfiddle.net/hedaru/dSgxr/6/
Here it is how it supposed to be: goo.gl/jAojK
Your CSS specifies the focused elements to be larger than the non-focused versions of the same elements.
Adding a border physically grows an element. Either add the same number of pixels of border to your element's base (with white colour) or use outline.
Here's my fix: http://jsfiddle.net/g105b/dSgxr/2/
It happens because of this:
input:focus, textarea:focus {
border: 2px solid #507ad5;
}
If you add another pixel to the border, the element is going to move.
You should keep the border at 1px and change its color.
input:focus, textarea:focus {
border: 1px solid #507ad5;
}
Update:
Use margins instead of position, it will fix it in the same place and the borders will "grow" around it. Here's an example.
CSS:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-top: 0px;
margin-left: -1px;
}
Another option (besides merely changing the border colour) is to add a margin that shrinks by the same amount that the border grows. Note that the margin must be large enough to overcome the margin collapse with adjacent elements.
Perhaps you can change the difference in margin. It seems like the margin-bottom of the elements right now is 2px, so when you change it to 0px on focus, you compensate for the growth of the element. Like so:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-bottom: 0px;
}
Or just add "margin: 0px" on the focused one. Just make sure margin+border makes the same number on focused and unfocused.
Related
i want to add border to the bootstrap form box.i had added border style properties but its not working . suggest please
thia is the form box class:
<div class="form-box">
<div class="form-top">
<div class="form-top-left">
And this is the css :
.form-box {
margin-top: 0px;
border-radius: 25px;
border-bottom-style: solid;
border-color: #50e54b;
}
Because of other classes, use the "!important"
border: solid 2px #50e54b!important;
You can add border to your box by using the border CSS property [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
Here's an example usage:
border: 1px solid #FFFFFF;
The code above will add a solid border of 1px in thickness and white in colour.
Click the link above to see more about the border property.
From what I can tell, the code works fine. But if you want you can add an 8px padding so the content has room for placement instead of being crammed in there with the border. By the way, a 2px or 4px border radius looks better for the border, but it's up to you.
.form-box {
padding: 8px; /*makes it look neat*/
border-radius: 4px; /*or 2px*/
border: 1px solid red;
}
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
I create an empty span with css border: 1px solid #333 but didn't see any working separator. I think there must be something inside the span? how to create a border with empty tag? a hr tag is too ugly.
You must give it a size, and display it as a block. Try this.
span.separator {
border-top: 1px solid #333;
width: 100%;
height: 1px;
display: block;
}
JSFiddle
hr tag is not ugly if you use border: 0; and than use border-top: 1px solid #000;, the 3d style of hr is just applied by browser, you can alter it the way I suggested.
hr {
border: 0;
border-top: 1px solid #000;
margin: 10px auto; /* For vertical spacing */
}
Demo
I would suggest you to use <hr /> as semantic goes, it will give a meaning to your page and will also save you few characters in the source.
Secondly about the span tag, it's an inline tag, to span it 100% you need to make it display: block;.
span.separator {
border-top: 1px solid #000;
display: block;
margin: 10px auto; /* For vertical spacing */
}
For more information on inline span you can refer my answer here.
A span is not a block element, in order to get what you want, you would have to give it a height and set it as display:block or inline-block.
If you want the border to be only on one side you can use border-right or border-left;
test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test
Here is an example
http://jsfiddle.net/Cm5fK/
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
What is going on with rendering the padding of a fieldset. It behaves as expected in FF and Chrome but fails in IE. This is the code im talking about:
<html>
<head>
</head>
<body>
<fieldset>
<legend>Hello world!</legend>
<div>Lorem ipsum</div>
</fieldset>
</body>
</html>
And this is the css
fieldset {
border: 1px solid black;
padding: 30px;
}
fieldset legend {
background-color: silver;
}
fieldset div {
border: 1px dotted silver;
}
Can also be seen here:
http://jsfiddle.net/nRAGM/6/
So my question is: how to get the above html to display as intended in IE?
The following code is cross-browser compatible.
You can control the indent of the fieldset legend independently. In padding the fieldset you also indent the legend. While this may be the desired effect in some cases, the following method offers more flexibility. Also adding the margin to the inner div will give you better control of your layout (because adding padding to a container can add unwanted width).
http://jsfiddle.net/nRAGM/35/
fieldset {
border: 2px solid silver;
}
fieldset legend {
border: 2px solid silver;
margin-left: 30px;
}
fieldset div {
border: 1px dotted silver;
margin: 30px;
}
Adding display:block to fieldset styling should solve your problem. It worked for me! Try out.
or the really naughty hack (or put it in a conditional [lte IE 8] CSS) version.
fieldset {
border: 1px solid black;
padding: 30px;
}
fieldset legend {
background-color: silver;
margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
border: 1px dotted silver;
}
margining the bottom of the label the same as the fieldset's top padding does the trick too. obviously no other browser should get both
PS: I think this works for IE6 too