Skip to content

Instantly share code, notes, and snippets.

@dumaurier

dumaurier/dabblet.css

Created February 8, 2012 12:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dumaurier/1768793 to your computer and use it in GitHub Desktop.
Save dumaurier/1768793 to your computer and use it in GitHub Desktop.
Download ZIP
Search Filter Toggle
Raw
dabblet.css
/**
* Search Filter Toggle
*/
/**
* FUN WITH RADIO BUTTONS v3
*/
body{
margin-top:100px;
}
h3{
font-family:sans-serif;
color:#007ac9;
font-size:14px;
position:absolute;
top:70px;
left:50px;
}
input[type="text"]{
display:inline-block;
height:25px;
width:400px;
border-radius:4px;
border:1px solid #007ac9;
}
input[type="submit"]{
display:inline-block;
height:30px;
width:60px;
border-radius:4px;
background:#007ac9;
color:white;
border:1px solid #007ac9;
}
div{
display:block;
float:left;
margin-left:45px;
width:500px;
font-family:sans-serif;
font-size:12px;
color:#007ac9;
position:relative;
}
div:last-of-type{
position:relative;
margin-left:-500px;
margin-top:50px
}
p{
position:relative;
display:inline-block;
width:40%;
}
input[type="radio"]{
display:table-cell;
position:relative;
}
label{
display:inline-block;
width:180px;
padding:5px;
text-align:center;
position:absolute;
left:0;
background:white;
border:1px solid #007ac9;
cursor:pointer;
transition:all .1s linear;
}
div p:first-of-type label{
border-radius:6px 0 0 6px;
}
div p:last-of-type label{
border-radius:0 6px 6px 0;
margin-left:-12px;
}
:checked ~ label{
color:white;
background:#007ac9;
}
input[type="radio"]:not(:checked)
{
opacity:0;
}
:not(:checked) ~ label span{
opacity:.7
}
input[type="radio"]:not(:checked) ~ label:hover span{
opacity:1;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h3>Search Filter:</h3>
<div>
<p><input data-name="Resume Database" id="M_M_M_V_JobsBox_SearchResume_rbRdbSearch" type="radio" name="M$M$M$V$JobsBox$SearchResume$searchTypeGroup" value="rbRdbSearch" checked="checked"><label for="M_M_M_V_JobsBox_SearchResume_rbRdbSearch">Resume Database <span class="dbRDBCount">(2436008)</span></label></p>
<p><input data-name="My Applicants" id="M_M_M_V_JobsBox_SearchResume_rbApplicantSearch" type="radio" name="M$M$M$V$JobsBox$SearchResume$searchTypeGroup" value="rbApplicantSearch"><label for="M_M_M_V_JobsBox_SearchResume_rbApplicantSearch">My Applicant List <span class="dbRDBCount">(0)</span></label></p>
</div>
<div>
<input placeholder="Java, Sales..." name="M$M$M$V$JobsBox$SearchResume$txtQuickResumeSearch" type="text" maxlength="500" id="M_M_M_V_JobsBox_SearchResume_txtQuickResumeSearch" class="dbResumeSearch" onkeypress="return keyboardSubmit(event, 'M_M_M_V_JobsBox_SearchResume_btnResumeSearchGo');">
<input type="submit" name="M$M$M$V$JobsBox$SearchResume$btnResumeSearchGo" value="Search" id="M_M_M_V_JobsBox_SearchResume_btnResumeSearchGo">
</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment