My Searchbox (Now)
I want to styling my checkbox like this
Thanks
It's my answer.
but maybe it's not good code.
HTML CODE
<div class="search-form">
<input type="text" id="search" />
<span id="search-icon"></span>
</div>
CSS CODE
.search-form{
position: relative;
width: 250px;
}
#search{
border: none;
width: 250px;
height: 40px;
box-shadow: 3px 5px 5px lightgray;
border-radius: 40px;
outline: none;
box-sizing: border-box;
padding-left: 10px;
padding-right: 40px;
}
#search-icon{
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
border-radius: 100%;
border: 2px solid blue;
width: 12px;
height: 12px;
}
#search-icon::after{
content: '';
position: absolute;
display: inline-block;
transform: rotate(45deg);
width: 10px;
height: 2px;
background-color: blue;
left: 10px;
top: 15px;
}
https://codepen.io/anon/pen/XaRmrpenter code here
Related
How do I make a button like this with pure CSS?
That's all that I've been capable of:
.sideMenuButton {
width: 100px;
height: 100px;
background: #6d1a3e;
position: relative;
transform: rotate(-90deg);
border: none;
}
.sideMenuButton:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #6d1a3e;
border-left: 29px solid #fff;
width: 42px;
height: 0;
}
<button type="button" class="sideMenuButton">X</button>
but it's not working right way
Just a quick try. I hope this could help you.
You can add text by the text attribute of the button.
.button-container{
width: 100px;
height: 100px;
overflow: hidden;
position:relative;
margin: 5px;
}
.button {
width: 148px;
height: 200px;
transform: rotateZ(45deg);
overflow: hidden;
position: absolute;
top: -68px;
left: -43px;
}
.button::before{
content: attr(text);
background: #6d1a3e;
display: block;
width: 100px;
height: 100px;
transform: rotateZ(-45deg);
position: absolute;
top: 50px;
left: 50px;
border: 5px solid #a5285e;
cursor: pointer;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 69px;
font-size: 2.5em;
color: white;
}
.button::after{
content: '';
display: block;
position: absolute;
border-bottom: 7px solid #a5285e;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
width: 41px;
transform: rotateZ(90deg);
top: 99px;
left: 120px;
cursor: pointer;
}
.other.button::before{
border-left: none;
border-top: none;
line-height: 80px;
font-size: 3em;
}
<div class="button-container">
<div class="button" text="PDF"></div>
</div>
<div class="button-container">
<div class="button other" text="☰"></div>
</div>
So I want to create something what you can see in Codepen however as I was getting into point to add arrows into both ends I realized that I have started that all out in a wrong way. My CSS will grow way to long for such small thing and will have probably problem with other elements on the page. I could not figure out what's the best approach to create these left and bottom lines with arrows in both ends and value from attribute so I hope some of you can point me out to right direction.
.ruler-left:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom {
position: relative;
display: inline-block;
text-align: center;
width: 225px;
height: 2px;
float: right;
margin-right: 5px;
margin-top: 110px;
font-size: 0px;
}
.ruler-bottom:before {
content: '';
position: absolute;
top: -5px;
left: 0;
border-top: 5px solid Gainsboro;
border-right: 10px solid black;
border-bottom: 5px solid Gainsboro;
background-color: Gainsboro;
}
.ruler-bottom:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
<div class="shape-container">
<hr class="ruler-left" data-height="30 mm">
<div class="shape">Shape image</div>
<hr class="ruler-bottom" data-width="30 mm">
</div>
I played with your problem a little...
See my Fiddle
I kept most of your CSS, but dropped the :before pseudos wich were rendering arrows.
I kept the :after pseudos wich show dimentions.
To draw the left and right arrows, I used classes wich only draw a triangle with the border of an element.
I applied those two classes on another element (I used hr again... Could be something else) placed before and after your «ruler» hr.
These three hr are wrapped in a div for positioning and rotation.
CSS
.arrowRight{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #000000;
}
.arrowLeft{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 16px 8px 0;
border-color: transparent #000000 transparent transparent;
}
/* -------- */
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
.shape-container {
display: block;
position:absolute;
width: 260px;
height: 260px;
background: Gainsboro;
padding: 2px;
}
.ruler-left-div {
position:absolute;
left:-104px;
top:110px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
transform: rotate(-90deg);
}
.ruler-left {
display: inline-block;
width: 190px;
height: 2px;
}
.ruler-left:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom-div {
position:absolute;
bottom:10px;
right:8px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
}
.ruler-bottom {
display: inline-block;
width: 190px;
height: 2px;
margin-bottom:8px;
}
.ruler-bottom:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
HTML
<div class="shape-container">
<div class="ruler-left-div"><hr class="arrowLeft"><hr class="ruler-left" data-width="30 mm"><hr class="arrowRight"></div>
<div class="shape">
shape image
</div>
<div class="ruler-bottom-div"><hr class="arrowLeft"><hr class="ruler-bottom" data-height="30 mm"><hr class="arrowRight"></div>
</div>
I'd like to connect some CSS circles with a vertical line between them.
I've attempted to use the pseudo-element :after selector as follows:
.circle {
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid;
position: relative;
border-color: #889EB7;
}
.circle:before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: 18px;
top: 0;
bottom: 0;
border: 1px dotted;
border-width: 0 0 0 1px;
}
But I'm not getting any result at all.
Photo for reference of what I'd like to accomplish:
Use the :before pseudo element this way:
* {font-family: 'Segoe UI'; font-size: 10pt;}
.circle {position: relative; border: 2px solid #999; border-radius: 100%; width: 50px; line-height: 50px; text-align: center; margin-top: 50px; background-color: #fff; z-index: 2;}
.circle:first-child {margin-top: 0;}
.circle:before {position: absolute; border: 1px solid #999; width: 0; height: 50px; display: block; content: ''; left: 50%; z-index: 1; top: -54px; margin-left: -1px;}
.circle:first-child:before {display: none;}
<div class="circle">Step 1</div>
<div class="circle">Step 2</div>
<div class="circle">Step 3</div>
You do have to give your :before element a width and a height if you want ti to appear as a line. Have a look at this:
.circle {
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid;
position: relative;
border-color: #889EB7;
}
.circle:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
border: 1px dotted;
border-width: 0 0 0 1px;
width: 1px;
height: 100px;
}
<div class='circle'></div>
Can anyone figure out a fix for making the table version look like the div version in IE9?
http://jsfiddle.net/tCT9b/2/
<table class="foo"></table>
<div class="foo"></div>
div.foo {
float: right;
}
table.foo {
float: left;
}
.foo {
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #999;
border-radius: 5px;
position: relative;
}
.foo:empty:before {
position: absolute;
background: #eee;
width: 50px;
height: 50px;
content: 'None';
border: 1px solid #999;
border-radius: 5px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
text-align: center;
display: block;
line-height: 50px;
}
I need show a notication modal window.. But since its a fluid layout the position changes on bigger screens.
How can i position the modal window below the link like in image. I want it in the exact position. How do i go about doing it?
This should work as a base for you.
HTML
<div class="notificaton-bar">
<div class="notice">Notification
<div>
Here is the applicable note.
</div>
</div>
</div>
CSS
.notificaton-bar {
background-color: #999999;
padding: 0 10px;
}
.notice {
position: relative;
display: inline-block;
background-color: inherit;
font-size: 1.5em;
min-width: 140px;
padding: 10px 5px;
text-align: center;
}
.notice div {
display: none;
width: 130px;
padding: 10px;
font-size: .75em;
text-align: left;
background-color: inherit;
border-radius: 10px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -75px;
margin-top: 10px;
}
.notice div:before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #999999;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.notice:hover div {
display: block;
}