I'm trying to create a input box that has only one border (i.e. border-left), but every time I put border-left to the selector, the top, right, bottom border show up (with that beveled and embossed look). Here's what I have right now.
HTML
<input type="text" id="fullname" class="detail" name="fullname" value="" />
CSS
.detail {
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
Here's my JSFiddle: http://jsfiddle.net/XRFB3/
Set your default border first:
.detail {
border:0;
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
JSFiddle
Try to reset borders first like border: none;. That is because browsers apply default user agent styles if the custom is not defined.
.detail {
border: none;
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
Use the following
border: none;
border-left: 1px Solid #fff;
instead of
border-left: 1px #fff solid;
Related
I am having trouble with making triangle shaped button using css and it is bit buggy and how can i fix it?
There is a fiddle here:
https://jsfiddle.net/Adrianalings/jy11o85s
.btn {
position: fixed;
bottom: 50%;
height: 0px;
background-color:transparent;
border-top: 15px solid transparent;
border-left: 20px solid red;
border-bottom: 15px solid transparent;
}
Here is the solution =)
.btn {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 50px 0 50px 86.6px;
border-color: transparent transparent transparent #C40006;
background-color:transparent;
}
<button class="btn"></button>
I am attempting to get a solid black border around my form text input, but the border will not style correctly. Here is my code:
#forminput {
border: solid black !important;
border-top: solid black !important;
border-bottom: solid black !important;
border-width: 0 2px !important;
border-radius: 2px;
}
button {
width: 100px !important;
height: 30px !important;
background-color: #095ba0 !important;
border: 1px !important;
border-color: #095ba0 !important;
color: #fff !important;
font-family: 'Roboto', sans-serif !important;
font-weight: 400 !important;
cursor: pointer !important;
border-radius: 2px !important;
}
<form action="*" method="POST">
<input id="forminput" type="text" name="uid" placeholder="Username" ><br><br>
<input id="forminput" type="password" name="pwd" placeholder="Password" ><br><br>
<button type="submit">Sign In</button>
</form>
But my form input look like below. What am I doing wrong?
.
You set the top and bottom border widths to 0.
Don't do that.
#forminput {
border: solid black!important;
border-top: solid black!important;
border-bottom: solid black!important;
border-width: 2px!important;
border-radius: 2px;
}
<input id="forminput">
and you can remove all the redundant stuff while you're at it
#forminput {
border: solid black 2px;
border-radius: 2px;
}
<input id="forminput">
Try:
#forminput {
border: 2px solid #000;
}
This will place a 2px solid black border on the top, right, bottom and left of your input.
I have the following, where I am creating a triangle (that looks like it has a border) with css.
I want to create another triangle, exactly the same, but about 50px to the right of the 1st one.
How would you do these 2 :before's :after's ???
JSfiddle Here
HTML
<div class="section-modules">
<div class="my-account">
<div class="section-module-light">
<h3>Register Here</h3>
<p>It’s quick and easy and you’ll be the first to know about new bits we release.</p>Register Now
</div>
</div>
</div>
CSS
.section-module-light:after,
.section-module-light:before {
content: '';
position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
position: relative;
margin-bottom: 2em;
padding: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: transparent;
color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
bottom: -0px;
left: 150px;
border-width: 36px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
bottom: -1px;
left: 150px;
border-width: 34px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}
JSfiddle Here
you do not need to create the triangle with separate stroke and fill, use css3 transform rotate. Then you can use before for one triangle and after for the second one.
display: block;
width: 34px;
height: 34px;
transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;
see the whole code here: http://jsfiddle.net/07jfLdwL/
You can use CSS3 transform rotate properties. See documentations.
I've made a tag-like shape in HTML/CSS as can be seen here - http://jsfiddle.net/RuXyP/
.tag {
float: left;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
I'm attempting to add an outline to it and have got as far as this - http://jsfiddle.net/RuXyP/1/
However, I'm struggling to work out how to add an outline to the arrow bit.
I can't use a border as that's how the arrow is created
I can't use outline as it can't be specified for individual sides
Is there any way for this to be done?
I prefer to not use pseudo selectors for this, and instead just use two divs for the triangle, one 1px larger than the other, and you simply move the margin over on the second div. Like so:
.arrow-border {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #FF00FF;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-left: -9px; /* Width of .arrow-border's border */
margin-top: 2px;
border-top: 8px solid transparent; /* One less than .arrow-border's border width */
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
Demo: http://jsfiddle.net/RuXyP/4/
Nit: Keep in mind that if you put this in a container smaller than your arrow, it is possible that the arrow head will detach. Generally this shouldn't be a problem.
you could use a pseudo element and absolute position:
The idea is to stack both pseudo:before and after on top of eachother, and draw one that is 1pixel larger on each sides. Set the biggest underneath to draw the red border-color .
DEMO
.tag {
float: left;
position:relative;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
border: 1px solid #FF00FF;
border-right: none;
}
.tag:after, .tag:before {
content:'';
margin-right:-10px;
width: 0;
height: 0;
position:absolute;
top:0px;
left:100%;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 8px solid #2e353d;
}
.tag:before {
top:-1px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 9px solid #FF00FF;
}
Fiddle
I am using ::-webkit-scrollbar to make a custom scrollbar in Chrome. I have a border-radius: 10px and in doing that, there are white corners at the top:
Sorry, it's kinda hard to see since it's a scrollbar.
I want the corners to be the same color as the header div (#dadae3). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?
CSS (entire):
body {
padding: 0;
margin: 0
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb {
background: #dadae3;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb:hover {
background: #c4c4cc
}
::-webkit-scrollbar-thumb:active {
background: #aeaeb5
}
HTML:
<div style='background: #dadae3; width: 100%; height: 30px;'></div>
<div style='width: 100%; height: 1000px'></div>
You have to set the ::-webkit-scrollbar-corner pseudo-element, e.g.
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
You can set the background-color property for the pseudo-element -webkit-scrollbar, doing that you can set the "corner color".
I was fighting this scrollbar-corner today, which takes space and creates unneeded gap. If I use overflow: auto on container this scrollbar corner completely disappears while scrollbar itself remains visible.
I had to customize webkit-scrollbar-corner as colored triangle instead of square.
Here is the result how to do it. With border trick.
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}
Try with this
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}