div {
margin: 0px;
padding: 0px;
}
#a {
position: fixed;
border: 4px solid black;
background-color:aqua;
}
#b {
width: 40px;
height: 40px;
background-color: grey;
}
<div id=a>
<div id=b></div>
</div>
https://www.hualigs.cn/image/60c949e478467.jpg
change a's border to "5px solid black"
https://www.hualigs.cn/image/60c949e425294.jpg
change a's border to "6px solid black"
https://www.hualigs.cn/image/60c949e426a74.jpg
change a's border to "7px solid black"
https://www.hualigs.cn/image/60c949e47c2e2.jpg
What!!! Why!!! Who can explain？ the broswer is chrome stable version.
I believe this is simply a browser rendering issue between the border and the div (I only see this issue on chrome, its not there in firefox). But you can get rid of that issue by adding this outline: 1px solid black; to #b in CSS.
Related
When using Safari, Setting an outline in CSS causes issues for selectable elements where the outline dynamically changes. Some of the outline gets left behind on previously selected elements:
.box {
outline: 1px solid black;
}
.box.selected {
outline: 5px solid blue;
}
Here is a CodeSandbox that demonstrates the problem. In order to reproduce, it has to be run on Safari: https://codesandbox.io/s/nostalgic-shockley-luu3m?file=/src/App.js&resolutionWidth=320&resolutionHeight=675
Has anyone experienced this issue and been able to solve it?
That’s how it works for the safari browser but you can try changing the style for .box from outline to border
.box {
height: 75px;
width: 100px;
border: 2px solid black;
margin: 0px 5px;
background: red;
}
.box.selected {
outline: 5px solid blue;
}
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
Ok, so for the sake of argument i have a box with a grey left and right border with an 8 pixel border bottom with a different colour.
The way borders display is showing the bottom border inside the left and right border. Ive done some research but i cannot find a way that is possible for the bottom border to display under the side borders as apposed to inside them. Sorry if i have not explained this too well please feel free to ask if you need any more information. Please follow the link below to a quick fiddle i have created.
<div class="bg">
<div class="box">
Box
</div>
</div>
.bg {
background-color: #fff;
width: 72%;
float: left;
height: 100%;
padding: 100px;
}
.box {
background-color: #fff;
height: 200px;
width: 200px;
float: left;
margin-left: 100px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 8px solid black;
}
http://jsfiddle.net/L06s4k50/
Thanks in advance people.
I think the best way of going about this is to forgo the border-bottom completely, and instead use a box-shadow property:
.box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 8px black;
}
http://jsfiddle.net/g54p4/
HTML and CSS is in jsfiddle in case if you need to see.
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
CSS
.box-input{
border-left: 7px solid transparent;
cursor: pointer;
display: block;
vertical-align: middle;
width: 100%;
}
.box-input:hover,
.box-input:focus{
border-left: 7px solid green;
}
.box-input input{
width: 100%;
border: 0;
padding-left: 80px;
}
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
}
.input-icon-email{
display: inline-block;
position: relative;
vertical-align: middle;
height: 34px;
width: 34px;
background: url('http://mbsales.com/WebAssets/email_icon1.gif') left center no-repeat;
padding-left: 30px;
}
Tried fake input div so that it would display border-left green but realized when go to next field by entering tab, it won't show border-left green. other problem is if try to add border-left green in input css, it will display when focus, and image icon will be jumpy. Also wanted to push the icon away with padding left but nothing happened.
Perhaps might be doing it wrong.
Help appreciated.
You can try this:
working DEMO
add this:
.box-input input{ border-left: 7px solid transparent;}
and return the hover style to the input:
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
border-left: 7px solid green;
}
You can as well use box-shadow : DEMO outset - DEMO inset
input:focus {
box-shadow: -7px 0 0 0 green;
}
or even
input:focus {
box-shadow: inset 7px 0 0 0 green;
}
This will be added to any borders already here and remains as long as input has focus. ouset box-shadow may change outline renderer from browser to browser , inset should not and inset will drawn hover background if any.
I have a rectangular div, like the one above. I want to remove the bottom border (from C to D) in my div. How can I do this?.
Edit: Here is my CSS:
#index-03 {
position: absolute;
border: .1px solid #900;
border-width: .1px;
border-style: solid;
border-color: #900;
left: 0px;
top: 102px;
width: 900px;
height: 27px;
}
<div id="index-03"
style="background-color:limegreen; width:300px; height:75px;">
</div>
Just add in: border-bottom: none;
#index-03 {
position:absolute;
border: .1px solid #900;
border-bottom: none;
left:0px;
top:102px;
width:900px;
height:27px;
}
You can either set
border-bottom: none;
or
border-bottom: 0;
One sets the border-style to none.
One sets the border-width to 0px.
div {
border: 3px solid #900;
background-color: limegreen;
width: 28vw;
height: 10vw;
margin: 1vw;
text-align: center;
float: left;
}
.stylenone {
border-bottom: none;
}
.widthzero {
border-bottom: 0;
}
<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>
border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>
Side Note:
If you ever have to track down why a border is not showing when you expect it to,
It is also good to know that either of these could be the culprit.
Also verify the border-color is not the same as the background-color.
You seem to misunderstand the box model - in CSS you provide points for the top and left and then width and height - these are all that are needed for a box to be placed with exact measurements.
The width property is what your C-D is, but it is also what A-B is. If you omit it, the div will not have a defined width and the width will be defined by its contents.
Update (following the comments on the question:
Add a border-bottom-style: none; to your CSS to remove this style from the bottom only.
You could just set the width to auto. Then the width of the div will equal 0 if it has no content.
width:auto;