Below there are three types of scrollbar which made by CSS. You can easily use them. First one with thin scrollbar and the Second one is thick scrollbar. And the last third one is different from both of first.

• STYLE

.scrollbar {
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

/*
 *  STYLE 1
 */
#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
	background-color: #000000;
}
/*
 *  STYLE 2
 */
#style-2::-webkit-scrollbar-track
{
	border: 1px solid black;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
	background-color: #000000;	
}

/*
 *  STYLE 3
 */
#style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-3::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
}

• HTML

<div class="scrollbar" id="style-1">
Your Content...

</div>

<div class="scrollbar" id="style-2">
Your Content...

</div>

<div class="scrollbar" id="style-3">
Your Content...

</div>

The post How to Implement Sticky Scroll bar using CSS appeared first on MaXEster Technologies | Technical Blog.

Please check the below example to clear the difference between visibility hidden and display none.

Like

visibility: hidden; this will hide the entity but space will still be allocated. Means if you want to hide something then that will hide but space of that portion remains their.

<p> This will be shown <b style="visibility: hidden;"> This Will Be hidden</b> 
This is the tail end</p>

This will be shown This Will Be hidden This is the tail end

but

display: none; will remove the entity and the the space allocated to it. Means it will hide the portion and also hide that portion area.

<p> This will be shown <b style="display: none;"> This Will Be hidden</b> 
This is the tail end</p>

This will be shown This Will Be hidden This is the tail end

The post Difference between visibility hidden and display none? appeared first on MaXEster Technologies | Technical Blog.

Insert The Input fields below to the form:-

• CSS

<style>
.rate-area {
    float:left;
    border-style: none;
}

.rate-area:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rate-area:not(:checked) > label {
    float: right;
    width: .80em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 40px;
    line-height: 32px;
    color: lightgrey;
    margin-bottom: 10px !important;
}

.rate-area:not(:checked) > label:before {
    content: '★';
}

.rate-area > input:checked ~ label {
    color: #e8262d;
    text-shadow: none;
}

.rate-area:not(:checked) > label:hover,
.rate-area:not(:checked) > label:hover ~ label {
    color: #e8262d;
    
}

.rate-area > input:checked + label:hover,
.rate-area > input:checked + label:hover ~ label,
.rate-area > input:checked ~ label:hover,
.rate-area > input:checked ~ label:hover ~ label,
.rate-area > label:hover ~ input:checked ~ label {
    color: #e8262d;
    text-shadow: none;
    
}

.rate-area > label:active {
    position:relative;
    top:0px;
    left:0px; 
}
</style>

• HTML

<ul class="rate-area">
                <input type="radio" id="5-star" name="crating" value="5">
<label for="5-star" title="Amazing">5 stars</label>
                <input type="radio" id="4-star" name="crating" value="4">
<label for="4-star" title="Good">4 stars</label>
                <input type="radio" id="3-star" name="crating" value="3">
<label for="3-star" title="Average">3 stars</label>
                <input type="radio" id="2-star" name="crating" value="2">
<label for="2-star" title="Not Good">2 stars</label>
                <input type="radio" id="1-star" required=""
 name="crating" value="1" aria-required="true">
<label for="1-star" title="Bad">1 star</label>
              </ul>

And, then Download The css DOWNLOAD

The post Simple 5-star rating with CSS: hover. appeared first on MaXEster Technologies | Technical Blog.