Corners Position Picker Using HTML CSS

corner position picker

In this post, I’ve shared a code for corner position picker using HTML and CSS.

HTML Code

<div id="aOrginCon">
<label class="aOrType lt"><input type="radio" name="wcs-orgin" value="left-top" />
<div></div>
</label>
<label class="aOrType ct"><input type="radio" name="wcs-orgin" value="center-top" />
<div></div>
</label>
<label class="aOrType rt"><input type="radio" name="wcs-orgin" value="right-top" />
<div></div>
</label>
<label class="aOrType lc"><input type="radio" name="wcs-orgin" value="left-center" />
<div></div>
</label>
<label class="aOrType cc"><input type="radio" name="wcs-orgin" value="center-center" />
<div></div>
</label>
<label class="aOrType rc"><input type="radio" name="wcs-orgin" value="right-center" />
<div></div>
</label>
<label class="aOrType lb"><input type="radio" name="wcs-orgin" value="left-bottom" />
<div></div>
</label>
<label class="aOrType cb"><input type="radio" name="wcs-orgin" value="center-bottom" />
<div></div>
</label>
<label class="aOrType rb"><input type="radio" name="wcs-orgin" value="right-bottom" />
<div></div>
</label>
</div>

See the Pen HTML CSS Select Position by Raj (@cserajee) on CodePen.

CSS Code

#aOrginCon {
margin: 50px auto;
width: 50px;
height: 50px;
border: solid 1px #666;
position: relative;
}

.aOrType {
position: absolute;
}

.aOrType input {
display: none;
}

.aOrType input+div {
border: solid 1px #000;
margin: 0px;
padding: 5px;
cursor: pointer;
}

.aOrType input:checked+div {
background: #000;
}

.aOrType.lt {
left: -6px;
top: -6px;
}

.aOrType.ct {
left: 19px;
top: -6px;
}

.aOrType.rt {
right: -6px;
top: -6px;
}


.aOrType.lc {
left: -6px;
top: 18px;
}

.aOrType.cc {
left: 19px;
top: 18px;
}

.aOrType.rc {
right: -6px;
top: 18px;
}


.aOrType.lb {
left: -6px;
top: 44px;
}

.aOrType.cb {
left: 19px;
top: 44px;
}

.aOrType.rb {
right: -6px;
top: 44px;
}

Leave a Reply

Top