cssでラジオボタンにdisplay:none;をして消したい。

Question

現在、HTMLテンプレートを利用してサイトを作っています。
使用したテンプレート
途中ですがサイトはここに仮置きしています。
仮置きサイト
タブを作って３つに表示する内容を分割したのですが、タブをcssで作った時のラジオボタンが消せません。

.tabs {

	background-color: #242943;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	margin: 0 auto;}
  
  /*タブのスタイル*/
  .tab_item {
	width: calc(100%/3);
	height: 80px;
	border-bottom: 5px solid #5ab4bd;
	background-color: #242943;
	line-height: 80px;
	color: #565656;
	display: block;
	float: left;
	transition: all 0.4s ease;
  }
  .tab_item:hover {
	opacity: 0.75;
  }
  .none{
	display: none;
  }
  /*ラジオボタン消す*/
  input[name="tab_item"] {
	display: none;
  }

  /*タブ切り替えの中身のスタイル*/
  .tab_content {
	display: none;
	clear: both;
	overflow: hidden;
  }
  
  
  /*選択されているタブだけ表示*/
  #director:checked ~ #director_content,
  #cast:checked ~ #cast_content,
  #staff:checked ~ #staff_content {
	display: block;
  }
  
  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .tab_item {
	background-color: #5ab4bd;
	color: #fff;
  }

<div class="tabs">
				
				<input id="director" type="radio" name="tab_item" class="none" checked>
				<label class="tab_item" for="director"><h2>DIRECTOR</h2></label>

				<input id="cast" type="radio" name="tab_item">
				<label class="tab_item" for="cast"><h2>CAST</h2></label>

				<input id="staff" type="radio" name="tab_item">
				<label class="tab_item" for="staff"><h2>STAFF</h2></label>

				<!--タブ1-->
				<div class="tab_content" id="director_content">
					内容
				</div>
　　　　　　　　　　　　　　　　　　<div class="tab_content" id="cast_content">中略</div>
                                 <div class="tab_content" id="staff_content">中略</div>
</div>


		

参考にしたいサイトはこちらです。サイト

なぜラジオボタンが消えないのでしょうか、、、css htmlともにそんなにやったことがなくて些細なミスかもしれませんがよろしくお願いします。

Answer 1

セレクタが間違ってるからではないでしょうか。
どれも疑似セレクタ::beforeによって描画されているように見えます。
.tab_item::before{display:none;}とかで消えませんか？

Comments

[namnium1125]

横から失礼します。m(_ _)m
セレクタが間違っているというよりは、「テンプレートの影響で」と考えた方がしっくりくるような気がします。

表示を本来のラジオボタンから擬似要素を使う方式に変えたのはおそらくこいつなので(^ ^;

[Artz]

ご指摘ありがとうございます。
```
/*ラジオボタン消す*/
input[name="tab_item"] {
display: none;
}
```
質問主さまの貼ったCSSのこの部分で、fortyテンプレートを修正しようとしてるのかなと思って回答したのですが、、、ここは参考サイトそのままだったんですね、細かく見比べずに回答してしまいました。
仰る通り「間違っている」という表現は不適切でした。

[unotovive]

ご回答ありがとうございます。最初の回答をそのまま試してもダメだったのですがnamnium1125様のご指摘にあった本来のラジオボタンから変えるというのを聞いてcssを見たのですがテンプレートでラジオボタンが定義されていたみたいでそのあたりを弄ってからArtz様の最初のご指摘通り書き換えたところうまくいきました。全く分かっていない初心者に対して親切にご回答ありがとうございます。