[装飾系]Input Radio チェックすると右にツールチップを表示

CSS HTML
 2018.02.02
 2018.03.05

チェックすると右にツールチップを表示

チェックした時に右にツールチップを表示するラジオボタンです。

browser: 
ニャン易度 
<div class="cp_ipradio">
	<label for="d_rb1">
		<input type="radio" id="d_rb1" name="cpipr09" value="" />
		<div>ネコ<span>猫</span></div>
	</label>

	<label for="d_rb2">
		<input type="radio" id="d_rb2" name="cpipr09" value="" />
		<div>イヌ<span>犬</span></div>
	</label>

	<label for="d_rb3">
		<input type="radio" id="d_rb3" name="cpipr09" value="" />
		<div>ウサギ<span>兎</span></div>
	</label>

	<label for="d_rb4">
		<input type="radio" id="d_rb4" name="cpipr09" value="" />
		<div>トリ<span>鳥</span></div>
	</label>

	<label for="d_rb5">
		<input type="radio" id="d_rb5" name="cpipr09" value="" />
		<div>リス<span>栗鼠</span></div>
	</label>
</div>
.cp_ipradio {
width: 90%;
margin: 2em auto;
text-align: left;
}
.cp_ipradio label {
position: relative;
display: block;
width: 100%;
margin: 2px 0 0;
padding: 10px 0;
}
.cp_ipradio label input[type='radio'] {
position: relative;
z-index: 1;
display: inline-block;
float: left;
margin-top: 3px;
margin-right: 15px;
}
.cp_ipradio label input[type='radio']:checked + div span {
position: absolute;
top: -5px;
left: 100%;
display: inline-block;
visibility: visible;
clear: both;
margin: 0 0 0 20px;
padding: 8px 15px;
transition: transform 200ms ease;
transform: translateX(0px);
text-align: center;
white-space: nowrap;
color: #ffffff;
border-radius: 4px;
background-color: rgba(34, 34, 34, 0.9);
box-shadow: 0 0 10px rgba(34, 34, 34, 0.2);
}
.cp_ipradio label input[type='radio']:checked + div span:before {
position: absolute;
top: 4px;
left: -1px;
content: '';
transform: rotate(45deg);
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(34, 34, 34, 0.9);
}
.cp_ipradio label div {
position: relative;
display: inline-block;
}
.cp_ipradio label div span {
position: absolute;
visibility: hidden;
transition: transform 200ms ease;
transform: translateX(-10px);
}
.cp_ipradio label:nth-of-type(1) input[type='radio']:checked + div span {
background-color: #2e9b72;
}
.cp_ipradio label:nth-of-type(1) input[type='radio']:checked + div span:before {
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(46,156,114, 0.9);
}
.cp_ipradio label:nth-of-type(2) input[type='radio']:checked + div span {
background-color: #36509a;
}
.cp_ipradio label:nth-of-type(2) input[type='radio']:checked + div span:before {
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(54,80,154, 0.9);
}
.cp_ipradio label:nth-of-type(3) input[type='radio']:checked + div span {
background-color: #f7c735;
}
.cp_ipradio label:nth-of-type(3) input[type='radio']:checked + div span:before {
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(247,199,53, 0.9);
}
.cp_ipradio label:nth-of-type(4) input[type='radio']:checked + div span {
background-color: #a62e7a;
}
.cp_ipradio label:nth-of-type(4) input[type='radio']:checked + div span:before {
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(166,46,122, 0.9);
}
.cp_ipradio label:nth-of-type(5) input[type='radio']:checked + div span {
background-color: #da3c41;
}
.cp_ipradio label:nth-of-type(5) input[type='radio']:checked + div span:before {
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(218,60,65, 0.9);
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?