I am trying to make custom checkbox using pure CSS, without required label element, i know there is a lot of answer but i didn't manage to make it as i need to.
Only problem is i have when checkbox is checked, there i do not know how to add checked sign, here is what I have for now
.checkbox-custom {
&:after {
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-top: -4px;
margin-left: -4px;
border: 1px solid grey;
border-radius: 0;
background-color: white;
}
&:checked:after {
width: 15px;
height: 15px;
color: grey;
}
}
<input type="checkbox" class="checkbox-custom">
if your are looking to add a checkmark to the after, use contentwith a html entity (css encoded)
.checkbox-custom::after {
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-top: -4px;
margin-left: -4px;
border: 1px solid grey;
border-radius: 0;
background-color: white;
}
.checkbox-custom:checked::after {
content:'\2713';
font-size: 20px;
line-height: 1em;
width: 18px;
height: 18px;
color: grey;
text-align:center;
}
<input type="checkbox" class="checkbox-custom">
Related
I am using XML menu with ASP.Net to display the menu, and styling them with the custom CSS, The issue is with the menus on Mobile devices.
Consider the below screenshot,
CSS Code,
.menuxml{
display:none;
background-color: #006969;
color: #ffffff;
font-size: 95%;
font-weight: 500;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
}
.main_menu,
.main_menu:visited,
.main_menu:hover {
text-align: center;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
margin-right: 8px;
padding-left: 5px;
padding-right: 5px;
}
.main_menu:hover {
background-color: #004949;
color: #ffffff;
}
.level_menu,
.level_menu:visited,
.level_menu:hover {
min-width: 100px;
border-bottom:1px solid #ccc!important;
background-color: #f1f1f1;
color: #000000;
text-align: left;
height: 30px;
line-height: 30px;
padding-left: 7px;
padding-right: 5px;
}
.level_menu:hover {
background-color: #004949;
color: #ffffff;
}
I have tried word-wrap, word-break and display:inline
Live test can be done with https://www.includehelp.com/
Since you used 'white-space: no-wrap' for dropdown options, Add new class to specific dropdown and add css(left: -120px).refer image
I created an autosuggest usting react-autosuggest, now I'm trying do design the layout. I took a css from an example which seems to work fine.
when I copied this css to my project the suggestion list completely detached from the input of the autosuggest as shown in the image below:
I also tried to move the div in the example but the list follows the input (as it should)
here is the css from codepen which I tried to use:
.react-autosuggest__container {
position: relative;
}
.react-autosuggest__input {
width: 240px;
height: 30px;
padding: 10px 20px;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 4px;
}
.react-autosuggest__input:focus {
outline: none;
}
.react-autosuggest__container--open .react-autosuggest__input {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
width: 280px;
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid #aaa;
background-color: #fff;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
}
.react-autosuggest__suggestion {
cursor: pointer;
padding: 10px 20px;
}
.react-autosuggest__suggestion--focused {
background-color: #ddd;
}
I think this css only works for the sandbox as used in the example. Especially
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
This means that the suggestions container is always shown 51px from the top of your page. Due to other things on your page the input is probably in the way and pushed aside, since it doesn't has the position: absolute attribute.
I don't know if you're using something like a grid system or another way to manage positions of elements on your website? You might consider using that instead of defining position with pxs.
try to add this
.react-autosuggest__suggestions-container--open {
display: block;
position: absolute;
top: 51px;
width: 100%;
border: 1px solid #aaa;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
max-height: 300px;
overflow-y: auto;
}
I´m trying to make a custom checkbox buttons that when clicked on will change its color as an indicator that they are active. I got up the point where its almost done but the checkbox is appearing left of the box instead of being the button itself. I can't find out how to do this.
input[type=checkbox] {
width: auto;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
input[type=checkbox] + label {
font-family: "Aharoni";
display: inline-block;
background: #dcdcdc;
color: black;
font-size: 12px;
font-weight: 400;
text-align: center;
border: solid 1px #a8a8a8;
border-bottom-color: black;
border-radius: 0px;
width: auto;
height: 20px;
padding-left:5px;
padding-right:5px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked + label,
input[type=checkbox]:active + label {
background:gray;
color:white;
}
<input type="checkbox" name="test" /><label>Text goes here</label></input>
You can do it as follows it will solve your problem:
Add a for the attribute in the label and set an id attribute in the input type this will bind both the elements and you can get the desired result.
<input id="my_checkbox" type="checkbox" name="test" />
<label for="my_checkbox">
Text goes here
</label>
</input>
Here I have put an id="my_checkbox" to the the checkbox input and added in the for="my_checkbox" attr.
input[type=checkbox] {
width: auto;
height: 20px;
cursor: pointer;
position: absolute;
opacity: 0;
z-index: 9999;
}
input[type=checkbox] + label {
font-family: "Aharoni";
display: inline-block;
background: #dcdcdc;
color: black;
font-size: 12px;
font-weight: 400;
text-align: center;
border: solid 1px #a8a8a8;
border-bottom-color: black;
border-radius: 0px;
width: auto;
height: 20px;
padding-left:5px;
padding-right:5px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked + label,
input[type=checkbox]:active + label {
background:gray;
color:white;
}
<input type="checkbox" name="test"><label>Text goes here</label></input>
I've try to made in CSS a "clamp effect".
See image:
https://s27.postimg.org/j6m72z5kj/h_transylvania.png
I do not know exactly how this effect is named, so I called him "clamp effect".
Can someone tell me why ::after does not working?(to can have that "clamp effect" - see link with the image).
My code:
h2 {
margin-top: 40px;
}
.container {
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 1px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
top: 29px;
left: 0;
}
<div class="container">
<h2>Beautiful Flower</h2>
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" />
<div class="recomandded">RECOMMENDED</div>
</div>
An absolute element will relate to it's parent only if it's in non static, default, position, therefore I've added position: relative to the container, in the example.
I've also fixed the required definitions to match the provided example image.
Here is the fixed CSS:
h2 {
margin-top: 40px;
}
.container {
position: relative;
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 8px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 20px;
left: 0;
}
Or have yourself a fiddle example
Hope it helps
I have been trying to add an arrow to the div with class .b, but is not working and I cannot figure out why. Does anyone has any idea?
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
}
#nextgoal.b :after {
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;"><div class="a">AA</div><div class="b">Next Goal</div></div>
your selector is not correct and content:''; is missing to effectively generate your pseudo element, try this:
#nextgoal .b:after {
content: '';
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
overflow: visible;
}
#nextgoal .b:after {
content: '';
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;">
<div class="a">AA</div>
<div class="b">Next Goal</div>
</div>
it is obviously not an arrow but a dot that shows because border is here ...