<!DOCTYPE html> | ||
<html> | ||
<head lang="en"> | ||
<meta charset="UTF-8"> | ||
<title>awesome bootstrap checkbox demo</title> | ||
<link rel="stylesheet" href="bootstrap.css"/> | ||
<link rel="stylesheet" href="../bower_components/Font-Awesome/css/font-awesome.css"/> | ||
<style>.radio label {display: inline-block;position: relative; padding-left: 5px; } .radio label::before {content: "";position: absolute; width: 17px;height: 17px;left: 0; margin-left: -20px;border: 1px solid #cccccc; border-radius: 50%; background-color: #fff;} .radio label::after {display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #009C71; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } .radio input[type="radio"] { opacity: 0; z-index: 1; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .radio.radio-inline { margin-top: 0; } | </style> | |
</head> | ||
<body> | ||
| ||
| ||
<div class="radio radio-info radio-inline"> | ||
<input type="radio" id="test" value="option1" name="radioInline" checked> | ||
<label for="test"> Checked </label> | ||
</div> | ||
<div class="radio radio-inline"> | ||
<input type="radio" id="test2" value="option2" name="radioInline"> | ||
<label for="test2"> Test </label> | ||
</div> | ||
</body> | ||
</html> |
Thursday 15 September 2016
Radio button css
Clip Image
<style>
.container {
position: relative;
}
#clip {
position: absolute;
clip: rect(0, 300px, 200px, 0);
/* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
.siteHeader{
width:150px;
height: 150px;
overflow: hidden;
}
.siteHeader .siteLogo{
margin: -0px;
}
</style>
<div class="container">
<img src="cooking3.jpg" width="400"/>
</div>
<div class="container">
<img id="clip" src="cooking3.jpg" width="400"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<header class="siteHeader">
<img src="taskbob/images/1.jpg" class="siteLogo" />
</header>
.container {
position: relative;
}
#clip {
position: absolute;
clip: rect(0, 300px, 200px, 0);
/* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
.siteHeader{
width:150px;
height: 150px;
overflow: hidden;
}
.siteHeader .siteLogo{
margin: -0px;
}
</style>
<div class="container">
<img src="cooking3.jpg" width="400"/>
</div>
<div class="container">
<img id="clip" src="cooking3.jpg" width="400"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<header class="siteHeader">
<img src="taskbob/images/1.jpg" class="siteLogo" />
</header>
Friday 5 August 2016
Less & show button in jquery with toggle
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
var text = jQuery("#hideshow").html();
if (String(text) == "Less") {
jQuery("#hideshow").html("More");
} else {
jQuery("#hideshow").html("Less");
}
});
});
</script>
<a id='hideshow' class="more">More</a>
<div id='content' style='display:none;'>
Akshay check text
</div>
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
var text = jQuery("#hideshow").html();
if (String(text) == "Less") {
jQuery("#hideshow").html("More");
} else {
jQuery("#hideshow").html("Less");
}
});
});
</script>
<a id='hideshow' class="more">More</a>
<div id='content' style='display:none;'>
Akshay check text
</div>
Saturday 23 July 2016
right side scroller color change
css here......
.mousescroll::-webkit- scrollbar {
width: 7px;
}
.mousescroll::-webkit- scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.mousescroll::-webkit- scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
div#chatlist {
width: 50px;
height: 140px;
}
div.mousescroll {
overflow: hidden;
}
div.mousescroll:hover {
overflow-y: scroll;
}
html demo
<div id="chatlist" class="mousescroll">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
Subscribe to:
Posts
(
Atom
)