I came across this trick when I wanted to feature some headline text. I love the look of it as was wondering if there was a way to have the ends point up.
.pagebreaker {
padding: 10px;
margin-bottom: -5px;
border-top: 4px solid #f6d241;
border-radius: 35px;
}
ref Image:
I've tried negative border-radius and negative padding. Is there something I am missing here? Or is this something that can't be done?
Thanks.
Use border-bottom
.pagebreaker {
padding: 10px;
margin-bottom: -5px;
border-bottom: 4px solid #f6d241;
border-radius: 35px;
width: 300px;
height: 10px;
}
<div class="pagebreaker"></div>
Related
I'm trying to achieve an input field with an underline. As it is visually more appealing to me, I'm trying to make underline as close as possible to the font. I did achieve the closeness, but now, input field cuts tail parts of the letters with tails. Is there a possible workaround for this? Can I cancel input's this behaviour with something like "overflow: visible"? Or may I draw a fake line over the input field, instead of using border-bottom? Thanks in advance.
In short, I'm trying to make text get through the bottom line.
Here is a screenshoot about the problem.
Here is my current class:
.kk_input {
border: 0;
border-bottom: 1px solid #000;
outline: none;
font-size: 20px;
height: 20px;
margin-top: 5px;
}
Without seeing the rest of your markup, this should give you an idea enough to go off of.
.kk_input {
border: 0;
outline: none;
font-size: 20px;
}
div {
position: relative;
}
div:after {
position: absolute;
content: "";
bottom: 4px;
left: 0;
height: 1px;
width: 100%;
background-color: black;
}
<div>
<input class="kk_input" type="text">
</div>
You can use more than one box-shadow to create this effect.
.so49204829_input{
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
box-shadow: inset 0 -11px 0 #fff, inset 0 -12px 0 #000;
}
<input type="text" class="so49204829_input">
& here's another approach using a second element. Unfortunately, you can't add an :after pseudo-element to input elements (at the time of posting).
.so49204829_input {
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
width: 200px;
display:block;
}
.so49204829_input_accent {
margin-top: -14px;
height: 1px;
width: 208px;
background-color: #000;
pointer-events: none; /* this makes sure click events aren't intercepted by the accent-line element */
}
<input type="text" class="so49204829_input"><div class="so49204829_input_accent"></div>
I want to style my own button. I've managed to get rid of the default style, but now I want to add a thin blue border around it, but don't know how. If I just get rid of the border: none, then the default style comes back, which is not what I want
This is my style.css:
input#hideshow{
margin: 0;
border: none;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
You also need to specify border-style because it's default value is none demo.
But the easiest way is to use the border short hand and also specify
border-width:
border:1px solid #7BC2E3;
and remove border:none;
DEMO
CSS :
input#hideshow{
margin: 0;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border:1px solid #7BC2E3;
width: 280px;
text-align: left;
}
U just specified the border color alone. U forget to specify border width
Demo
border: 2px solid #7BC2E3;
Your CSS works perfectly. But you don't want it to work this way. You set border to none so no border is displayed. You better should set to, for instance:
border: 1px solid #7BC2E3;
And remove the border-color line.
https://developer.mozilla.org/en-US/docs/Web/CSS/border
Try doing this:
input#hideshow{
margin: 0;
border:1px solid blue;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
Hope this is what you want.
Try like this: Demo
border:1px solid #7BC2E3;
and remove
border:none from your code
Really basic question but please read to the bottom for the things I have tried. I have the following for an input box:
<input type="number" ng-model="vendor.day_of_the_month" name="" class="text-radio" max="31" min="1">
And the following CSS:
input[type=number] .text-radio{
vertical-align: middle;
margin: 0px;
width: 60px;
margin-left: 2px;
margin-right: 2px;
height: 30px;
border: 0;
border-bottom: 1px solid #909090;
box-shadow:none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
For some reason the code around the borders do not seem to work. What seems odd is:
When I change the width of the input box in the CSS that seems to effect a change which seems to indicate it is NOT a selectivity issue
When I remove the "number" type from the HTML the formatting works which would seem to indicate the CSS code works.
Is there something special around how you have to format borders for a number input I am missing?
i think it is the space in your css between input[type=number] and .text-radio{
input[type=number].text-radio{
vertical-align: middle;
margin: 0px;
width: 60px;
margin-left: 2px;
margin-right: 2px;
height: 30px;
border: 0 none;
border-bottom: 1px solid #909090;
box-shadow:none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
Demo
I think error is in your selector you are using it wrong
use just
.text-radio
or
input[type=number]
or if you want to use both then try this
input[type=number].text-radio
mean remove space b/w slectors because space is used when we want to add css to a child of a selector.
I am trying to make an arc using border-radius like this (in chrome)
#elem {
border: 2px solid orange;
border-bottom: none;
width: 440px;
height: 60px;
border-top-right-radius: 220px 60px;
border-top-left-radius: 222px 60px;
}
but the arc is not continuous. if i remove the border-bottom property (which makes the bottom border also visible) it became continous. Making bottom-border color to transparent also doesn't help.
e.g. http://jsfiddle.net/kFxec/9/
Not able to understand what is wrong here?
I am trying this for chrome only. works fine in firefox
you could instead fake border with box-shadow : http://jsfiddle.net/ZC2m2/
#elem {
box-shadow:0 -2px 0 orange;
width: 440px;
height: 60px;
border-top-right-radius: 220px 60px;
border-top-left-radius: 222px 60px;
}
I would say that it is some kind of bug.
Seems related to the bottom border.
It disappears with this CSS
#elem {
border: 2px solid orange;
border-bottom: none;
width: 440px;
height: 60px;
border-top-right-radius: 220px 60px;
border-top-left-radius: 222px 60px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
What you see cutting the top border seems the bottom border doing strange things around. But giving it a moderate radius seems to somehow make it behave. (I don't know why)
fiddle
I would like to have the #textblock div to have at the same hight as #brevillestandard div.
CSS:
#textblock {
width: 260px;
border: 1px solid #999999;
padding: 0 5px;
float: right;
font-size: 95%;
background-color: #FEF4CC;
}
#brevillestandard {
padding: 8px 0 0 5px;
height: 80px;
Width: 61%;
border: 1px solid #999999;
float: left;
margin: 5px 5px 5px 0;
}
The answer is literally in the question.
You're giving #brevillestandard a height of 80px.
Add:
height: 80px;
to any other elements you want to be the same height.
Are they not the same height when you set the height in the CSS for both of them?
Perhaps it's the different padding that is causing the difference in their appearance?
If you make the CSS identical, do the two divs look the same? That might be one place to start. Or apply the same CSS class to both, and see if they look the same then.