I would like some help over something thats driving me nuts so hard hahaha. So I have this checkboxes like this:
So, I have this design that my UX & UI colleague made for this project that I need something similar to this:
As you can see in the image above, I need to implement something where there`s no checkboxes and at the moment I select an Icon a color blue must show on the border as letting the user know that option has been selected.
The resource Im using for this is materializeCSS check boxes and my current CSS is the below:
/*Checkboxes*/
[type="checkbox"]:checked + span:not(.lever):before {
top: -4px;
left: -5px;
width: 12px;
height: 22px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #2372bd;
border-bottom: 2px solid #2372bd;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
/*Checkboxes*/
[type="checkbox"] + span:not(.lever):before, [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
z-index: 0;
border: 2px solid #888888;
border-radius: 1px;
margin-top: 3px;
-webkit-transition: .2s;
transition: .2s;
}
//This are the current circles that wrapps the icons
.services-circle{
border: 1px solid #858585;
width: 45px;
margin-top: 10px;
margin-bottom: 20px;
height: 45px;
border-radius: 50%;
}
//Current HTML
<label>
<div class="services-circle center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fireplace</i>
<input name="property[services_attributes][0][gas]" type="hidden" value="0"><input
type="checkbox" value="1" name="property[services_attributes][0][gas]"
id="property_services_attributes_0_gas">
<span for="gas">Gas</span>
</div>
</label>
NOTE: If I select the icon or circle it gets checkboxed, so I guess thats nice
So, is there's some cool resource out there in the lost internet to do something like this? Or if have some basic code where pushes me to achieve something like this, that would be awsome! I will appreciate your help!
Set the checkboxes to display: none;
Related
I have a styled checkbox that is the child of a container along with some text. The reason the checkbox and text are children of a parent is so that they can sit next to each other and be centered vertically on the UI. This has worked fine for me; however, I've noticed that the checkbox starts to change from a perfect circle into more of an oval as text starts to wrap into multiple lines (on mobile the text is two lines long and on desktop it is only one line). How could I fix this so that the checkbox does not stretch as the text wraps into multiple lines? Below is my html and styling, thank you.
.opt-in {
display: flex;
align-items: center;
color: #f4a11e;
}
input[type='checkbox'] {
position: relative;
margin: 17px 15px 0 0;
cursor: pointer;
width: 20px;
height: 20px;
-webkit-appearance: none;
background: transparent;
border: 1px solid #f4a11e;
outline: none;
border-radius: 50%;
transition: 0.5s;
}
input[type='checkbox']:before {
content: '';
position: absolute;
top: 45%;
left: 50%;
width: 4px;
height: 10px;
opacity: 0;
border-right: 1px solid #f4a11e;
border-bottom: 1px solid #f4a11e;
transform: translate(-50%, -50%) rotateZ(40deg);
transition: 0.2s;
}
input:checked[type='checkbox']:before {
opacity: 1;
}
<div class="opt-in">
<input type="checkbox" v-model="optIn" id="checkbox" />
<label for="checkbox">Opt-in to receive the latest cloud insights and industry deep dives.</label>
</div>
In the CSS code in the input[type='checkbox'] {} section, try using min-width: 20px; rather than width: 20px;.
Worked for me in a test implementation with copy/pasted code although I had to set max-width in the properties of the opt-in div to test it.
I don't have a technical explanation but I believe it has something to do with the relative position or the display: flex overriding the specified width/height in pixels.
I am developing a site and almost the only thing that's left is a slide number indicator. The problem can be viewed in this link:
URL:
http://parimpex.sem.lv/logistics-insurance/
VirusTotal:
https://www.virustotal.com/#/url/f270075d5d8e26607cd6f06b49459e0c99a6a6c09369ffa2f77d8e23ee5d178f/detection
The current slide indicator looks like this:
https://i.imgur.com/HkCUXta.png
The end result is supposed to look like this: https://i.imgur.com/CfdZtOS.png
I have tried using multiple circular box-borders, but that didn't do it.
The white part of the indicator is done, but there has to be a transparent space, and then an orange border.
Please guide!
Your solutions is here:
<div class="circle"></div>
and CSS:
.circle {
display: inline-block;
border-radius: 10px;
width: 10px;
height: 10px;
border: 5px solid #000;
background-color: #fff;
box-shadow: 0px 0px 1px 2px #fff;
}
https://jsfiddle.net/9dbza1px/1/
Add this to your css
.global_slider .flickity-page-dots .dot {
position: relative;
}
.global_slider .flickity-page-dots .dot.is-selected:before {
content: '';
width: 25px;
height: 25px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 50%;
border: 1px solid yellow;
}
Checkboxes doesn't appear properly when using Chrome and zoom out to 75% or less. I'm also using AngularJS latest version. In FireFox and Internet Explorer they appear properly.
I tried to fix this problem with:
input[type=checkbox] {
-webkit-appearance:checkbox;
}
but this doesn't help.
Here how it looks like:
The checkboxes are custom and there is 1 span and inside 2 divs. Here is the code:
.ckeckmark {
display: inline-block;
width: 18px;
height: 18px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}`
.ckeckmark > .stem {
position: absolute;
width: 1px;
height: 11px;
background-color: #1C4A9E;
left: 8px;
top: 2px;
}
.ckeckmark > .kick {
position: absolute;
width: 5px;
height: 1px;
background-color: #1C4A9E;
left: 3px;
top: 12px;
}
<span ng-class="{ckeckmark: resident}">
<div class="stem"></div>
<div class="kick"></div>
</span>
.stem and .kick are 2 divs next to each other inside .checkmark span class.
After research i noticed that Google Chrome displays a web page OK at 100% zoom (and above) but when the zoom level is less than 100% (e.g. 90%) padding get changed. A moves from the right-hand-side of the screen to the left hand side.
Any help/suggestions?
So I popped this into a fiddle and I think I saw your problem. It took zooming out to 33% before the checkmark disappeared at jsfiddle as opposed to your 75%.
The solution I used was to use borders on the actual stem and kick instead of using a background on those elements.
.ckeckmark {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid black;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.stem {
position: absolute;
width: 1px;
height: 11px;
border-left: 1px solid red;
left: 8px;
top: 2px;
}
.kick {
position: absolute;
width: 5px;
height: 7px;
border-top: 1px solid red;
left: 3px;
top: 12px;
}
I have not tested this in other browsers, but I zoomed out all the way to 25% and I still saw the checkmark.
Fiddle here: http://jsfiddle.net/Lvc0u55v/1658/
Hello I was recently browsing around some demo for websites for client. And saw a really cool thing I liked. So I try to inspect in the browser to see if I replicate the effect on my own. And I have no idea how they did it.
here is the link to the demo
http://www.templatemonster.com/demo/45057.html
And here is a n image to show what I'm talking about.
They have these squares with an overflow at the bottom looking like multiple elements.
I was able to grab the HTML/CSS and replicate the just one box without the overflow. But I can't figure out how to make it look like stacked boxes, nor can I find where the code is.
I tried to replicate using JSFidle as you can see here
HTML
<div class="span2"><div class="service-box boxed green"><figure class="icon"><i class="icon-file-alt"></i></figure><div class="service-box_body"><h2 class="title">Accounting valuations</h2></div></div> </div>
.service-box.boxed {
border-radius: 0px;
box-shadow: none;
padding: 25px 15px;
margin-bottom: 30px;
text-align: center;
position: relative;
background: none repeat scroll 0% 0% #F1F6F9;
overflow: visible;
border: 1px solid #C5D0D2;
}
http://jsfiddle.net/w1defmkz/
You're pretty close but missing the :before and :after pseudo elements:
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:after {
left: 3px;
right: 3px;
bottom: -7px;
}
Here's an updated fiddle: http://jsfiddle.net/w1defmkz/1/
Well, The user has added two more divisions, made them absolute.
You see, the whole span (class = "span2") is positioned relative.
This is the css for the one of them...
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
Js Fiddle: http://jsfiddle.net/3my6rhgL/
The title says it all, I've just discovered that IE (9 - 11) automatically applies about 50% opacity to any element's border with border-style: dotted.
The weirdest thing is, it only happens on dotted in particular, solid and dashed are fine.
You can test it yourself: http://jsfiddle.net/ptv74f4q/1/
Any ideas?
This appears to be due to IE anti-aliasing the dotted border. If you make the border-width bigger than 1px (say 5px) the border will appear white again.
One way to get around this would be to overlay some pseudo elements with the same dotted border on top to counteract the opacity:
div {
width: 200px;
height: 200px;
background: #000;
}
span {
transform: rotate(0deg);
display: inline-block;
width: 180px;
height: 85px;
line-height: 85px;
text-align: center;
margin: 8px 8px 0 8px;
border: #fff 1px solid;
color: #fff;
position: relative;
}
span.dotted {
border-style: dotted;
}
span.dotted::before, span.dotted::after {
border: #fff 1px dotted;
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
}
<div>
<span>I'm with normal border</span>
<span class="dotted">I'm with dotted border</span>
</div>
JS Fiddle: http://jsfiddle.net/oyrbLyjc/1/
Alternative method
Alternatively you could try using border-image. There are online tools (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator) that would be able to help you generate a similar border using this method.