I want to have a div element that acts like a checkbox. When a user clicks it once, a checkbox will appear in the upper-left corner. If a user clicks the div again, the checkbox will disappear. Currently, I'm using the following CSS, which can be seen in this Fiddle.
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield-selected {
border: solid 1px green;
}
.my-checkfield-selected::before,
.my-checkfield-selected::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.my-checkfield-selected::before {
border-width: 0;
}
.my-checkfield-selected::after {
border-radius: 0;
border-width: 12px;
border-left-color: green;
border-top-color: green;
}
As shown in the Fiddle, the triangle successfully toggles. However, I want to show a white checkmark in that triangle. How can I do that, preferably with CSS. I'm not sure where to go.
Thanks,
By swapping the ::before/::after, so the ::before is used for the green corner, you can simply add content: '\2713' (\2713 is the CSS code for a checkmark) to the ::after
function toggle(elem) {
$(elem).toggleClass('my-checkfield-selected');
}
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield-selected {
border: solid 1px green;
}
.my-checkfield-selected::before,
.my-checkfield-selected::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.my-checkfield-selected::after {
content: '\2713';
font-size: 13px;
line-height: 13px;
font-weight: bold;
color: white;
}
.my-checkfield-selected::before {
border-radius: 0;
border-width: 12px;
border-left-color: green;
border-top-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-checkfield" onclick="toggle(this)">
[hi]
</div>
You can't put anything in an element (or pseudo-element) that is only made of borders.
As such, you would need to, as a suggestion, use a square pseudo-element, with an image as a background and then have a second gradient background as the color.
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield::before,
.my-checkfield::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background-image:
url(http://www.clker.com/cliparts/p/e/X/9/d/4/check-mark-white-md.png),
linear-gradient(135deg, green 50%, transparent 50%);
background-size: 70% auto, cover;
background-position: auto, left top;
background-repeat: no-repeat;
}
<div class="my-checkfield" ) ">
[hi]
</div>
Related
I need to create an input with a border that will change when the input is focused.
The inputs should works in that way:
When input is not focused and is empty, the label should be inside the input:
Input without focus
When user focus the input, or input is filled, the label will move up and the border should be cropped so the label is not obscured by the border.
Input with focus
I've tried with adding before element on label with background, but i realized this is not the correct way because input has not background itself and depend on the subpage there can be other background color and finally the resould looked like this:
Input with focus
Input without focus
Could you please help me with this?
You can try the below code
HTML
<div class="input-control">
<input type="text" required>
<label>Placeholder</label>
</div>
CSS
.input-control {
position: relative;
}
input {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
}
input:focus {
border: 1px solid red;
background-color:#fff;
}
label {
color: #999;
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s;
}
input:focus ~ label,
input:valid ~ label {
top: -8px;
left: 10px;
font-size: 12px;
color: red;
background-color:#fff;
padding:0 5px 0 5px;
}
You can go with this approach
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 62.5%;
background: #FFF;
}
div.centralize {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
div.input-block {
position: relative;
}
div.input-block input {
font-weight: 500;
font-size: 1.6rem;
color: #495055;
width: 350px;
padding: 15px 15px;
border-radius: 1rem;
border: 2px solid #D9D9D9;
outline:none;
}
div.input-block span.placeholder {
position: absolute;
margin: 17px 0;
padding: 0 4px;
font-family: Roboto, sans-serif;
color: #6c757d;
display: flex;
align-items: center;
font-size: 1.6rem;
top: 0;
left: 17px;
transition: all 0.2s;
transform-origin: 0% 0%;
background: none;
pointer-events: none;
}
div.input-block input:valid + span.placeholder,
div.input-block input:focus + span.placeholder {
transform: scale(0.8) translateY(-30px);
background: #fff;
}
div.input-block input:focus{
color: #284B63;
border-color: #284B63;
}
div.input-block input:focus + span.placeholder {
color: #284B63;
}
<div class="centralize">
<div class="input-block">
<input type="text" name="input-text" id="input-text" required spellcheck="false">
<span class="placeholder">
Placeholder
</span>
</div>
</div>
Check out the code below. There's no way to actually crop a border, but you can construct the top border from 2 separate elements and then shrink the right element as needed - this way you don't have to worry about the flaws of the background workaround.
let field = document.querySelector('.field');
let input = document.querySelector('.input-field');
let label = document.querySelector('.label');
let border = document.querySelector('.shrink');
input.addEventListener("click", () => {
let displacement = label.offsetWidth + 14;
// get label width, plus hardcoded gap which should ideally be computed (the initial 10px gap + 4px to give the label some space)
field.classList.add('active');
border.style.width = 'calc(100% - ' + displacement + 'px)';
})
body {
background: URL('https://www.toptal.com/designers/subtlepatterns/uploads/just-waves.png')
}
* {
font-family: sans-serif;
}
.field {
position: relative;
width: auto;
display: inline-block;
}
input {
border: none;
padding: 12px;
border-radius: 10px;
background: transparent;
outline: none;
border: 2px solid #000;
border-top: none;
position: relative;
}
.b1 {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 8px;
border-radius: 10px 0 0 0;
border-top: 2px solid #000;
}
.b2 {
content: '';
position: absolute;
top: 0;
right: 0;
width: calc(100% - 10px); /* subtract 10px to account for left corner border */
height: 8px;
border-radius: 0 10px 0 0;
border-top: 2px solid #000;
}
label {
position: absolute;
top: 12px;
left: 12px;
transition: all ease-in-out .1s;
}
.field.active label {
transform: translateY(-20px);
}
<div class="field">
<div class="top-border">
<div class="b1"></div>
<div class="b2 shrink"></div>
</div>
<label class="label">test label</label>
<input type="text" class="input-field">
</div>
Could some one help me with one question:
I have 2 divs.
The first one is being used to rotate the second div.
the second one to rotate it self to the regular rotation.
I click on first div --> it rotates the second DIV.
I click on the second div, it's rotating it self to the previous/regular position.
#_4220w_86 {
height: 20px;
width: 20px;
background-color: #171717;
border-radius: 50%;
margin-top: -43px;
margin-left: 124px;
cursor: pointer;
}
#_4220w {
width: 0;
height: 0;
border-top: 3px solid transparent;
border-left: 6px solid #ec820f;
border-bottom: 3px solid transparent;
margin-left: 132px;
margin-top: -13px;
cursor: pointer;
}
#_4220w_2 {
position: absolute;
right: 20px;
height: 28px;
width: 28px;
background-color: #0f0f0f;
border-radius: 100%;
cursor: pointer;
top: 45px;
}
._4220w_2 {
width: 0;
height: 0;
border-style: solid;
border-width: 5.5px 0 5.5px 10px;
border-color: transparent transparent transparent #ec820f;
margin-left: 10px;
margin-top: 8px;
}
<!--Here is the first DIV:-->
<div id="_4220w_86">
</div>
<div id="_4220w">
</div>
<!--Here is the second DIV:-->
<a href="#" id="_4220w_2">
<div class="_4220w_2"></div>
</a>
try to use this code
http://jsfiddle.net/24yboknc/1/
html
<div id="rotate">rotate the other</div>
<div id="rotate2"> back to normal</div>
css
#rotate,#rotate2{
width: 100px;
height: 100px;
background: red;
margin: 50px;
text-align: center
}
#rotate2.rotated{
transform: rotate(90deg);
}
js
$('#rotate').click(function(){
if(!$('#rotate2').hasClass('rotated')){
$('#rotate2').toggleClass('rotated');
}
});
$('#rotate2').click(function(){
if($('#rotate2').hasClass('rotated')){
$('#rotate2').removeClass('rotated');
}
});
inspired to jQuery rotate div onclick +/-90
I am trying to make a header as shown in the image attached. I tried the other answers on this website too but none actually helped very much.
I already have figured out the text and logo parts but need someone to help with the slanting div borders.
The effect that I want:
Try This:
header {
border:1Px solid;
height: 200px;
position: relative;
}
header:before, header:after {
position: absolute;
width: 0;
height: 0;
content: '';
border-width: 100px;
border-style: solid;
}
header:before {
left: 0;
border-color: transparent transparent transparent #000;
}
header:after {
right: 0;
border-color:transparent #000 transparent transparent ;
}
<header></header>
Depending on what you have going on in your header, you could try using triangles to mimic the slanted borders;
header{
width: 100%;
height: 200px;
background: #2c2d2e;
}
.triangle-right {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
position: absolute;
left: 0;
border-left: 200px solid white;
}
.triangle-left {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 200px solid white;
position: absolute;
right: 0;
}
<header>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</header>
I need a function to change the appearance of some elements in my HTML page but I am not able to do it.
The problem is that I cannot use a command like
document.getElementById('')
because I need to make the changes effective when the page is already loaded and I use Django and python. My html page looks like this.
<html>
<style type="text/css">
.bs-sidebar.affix {
position: static;
}
.sideheading{
background-color: #e0e0e0;
background-image: -moz-linear-gradient(#fafafa, #e0e0e0);
background-image: -webkit-linear-gradient(#fafafa, #e0e0e0);
background-image: linear-gradient(#fafafa, #e0e0e0);
background-repeat: repeat-x;
display: block;
padding: 10px 10px;
border-bottom: 1px solid #ccc;
color: #222;
font-weight: bold;
font-size: 20px;
line-height: 20px;
border-left: 0 none;
}
/* First level of nav */
.bs-sidenav {
/*margin-bottom: 30px;*/
padding-top: 10px;
padding-bottom: 10px;
background-color: #fafafa;
border-radius: 5px;
border:1px solid #CCC;
}
.bs-sidebar .nav > li > a {
font-size: 1.2em;
display: block;
color: #716b7a;
padding: 10px 20px;
border-right: 4px solid transparent;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
background-color: #fff;
border-right: 4px solid #dbd8e0;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
font-weight: bold;
color: #418cd1;
background-color: #fff;
border-right: 4px solid #418cd1;
}
.xgap{
margin-top:60px;
}
.wrap {
margin: 0 auto;
}
.progress-radial {
float: left;
margin-right: 30px;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #2f3439;
.progress-radial .overlay {
position: absolute;
width: 60px;
height: 60px;
background-color: #fffde8;
border-radius: 50%;
margin-left: 20px;
margin-top: 20px;
text-align: center;
line-height: 60px;
font-size: 16px;
}
.progress-0 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent),
linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-5 {background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%,
transparent), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
</style>
<div class="span6">
<table class="table table-borderless" style="border:1px solid #C0C0C0;background-
color:#FBFBFB;">
<tr><th>First name </th><td>: {{user.first_name}}</td></tr> --> I use
// Django framework user.first_name is from source file
// When the html page is loaded I want to check the td.If td
// has value the profile meter should change from 0% to 10%.
<tr><th>Last Name </th><td>: {{user.last_name}}</td></tr>
<tr><th>Primary mail </th><td>: {{ user.email }}</td></tr>
</table>
</div>
<div class="wrap row">
<div class="progress-radial progress-{{progress}}" style="margin:10px 0px 20px
70px;">-->// here {{progress}}should change according to the td's (i.e)
//initially it is 0% I need a javascript to draw the profile meter.
<div class="overlay">{{progress}}%</div>--> here {{progress}} should change
// according to the td's (i.e) initially it is 0% and it
// should change 10%, 20% and so on according to the td's field.
</div>
</div>
</html>
I need a javascript function for changing the profile meter.
If you want to wait for the page to be done loading just use window.onload, then you can call document.getElementById() inside, which will run when the page is done loading:
window.onload = function() {
// This is only ran after the window is loaded
document.getElementById('myElementsId').style.[css-property] = [change];
}
For example if I wanted to change a color:
window.onload = function() {
document.getElementById("myElementsId").style.color = "blue";
}
If you want a progressbar to fill up to a certain value, try the following:
HTML:
<div class="progressbar"><div class="progress"></div></div>
CSS:
.progressbar {
height: 30px;
position: relative;
border: 1px solid #ccc;
}
.progressbar .progress {
position: absolute;
height: 30px;
left: 0;
top: 0;
width: 0%;
transition: width 0.3s ease-out;
background: #f00;
}
JS:
document.getElementsByClassName('progress')[0].style.width = '10%';
If you call the above JS line at the bottom of the page (right before </body>) it should work like a charm :)
how can i apply the yellow gradient to the white arrow?
here is the fiddle link:
http://jsfiddle.net/VNnKR/
$('.white').hover(function() {
$(this).addClass('gradient');
})
I found a solution, note that it only works with a solid background.
HTML:
<div class="arrow">
START HERE!
</div>
CSS:
body {
background: #6cc5c3;
}
.arrow {
margin-top: 150px;
position: relative;
font-weight: bold;
margin-bottom: 5px;
height: 20px;
padding: 10px 30px 10px 10px;
width: 140px;
color: #6cc5c3;
background: #fff;
text-align: center;
}
.arrow:after {
content:'';
height: 0;
width: 0;
display: block;
border-color: #6cc5c3 #6cc5c3 #6cc5c3 transparent;
border-width: 20px;
border-style: solid;
position: absolute;
top: 0;
right: -20px;
}
.gradient {
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
}
DEMO
The arrow is transparent, and the rest of the "arrow" is the same as the body background color.