Доброго времени друзья! Делаю форму обратной связи со вкладками, посредством radio button в общем select у меня стал не кликабельным , в голову не приходит почему. вот ссылка на онлайн редактор http://jsbin.com/yoq/7/edit (Пункт 1 который)
*{
box-sizing:border-box;
}
.tabbed{
font: 1em 'PT Sans', sans-serif;
width: 800px;
margin: 50px auto;
position:relative;
}
.tabbed > input{
display: none;
}
.tabbed > label{
display: block;
float: left;
padding: 12px 20px;
margin-right: 5px;
cursor: pointer;
transition: background-color .3s;
}
.tabbed > label:hover,
.tabbed > input:checked +label{
background: #4EC6DE;
}
.tabs{
clear:both;
}
.tabs > div{
width: 800px;
position:absolute;
opacity: 0;
border: 2px solid #4EC6DE;
padding: 30px 30px 40px;
}
#tabNav1:checked ~ .tabs > div:nth-of-type(1),
#tabNav2:checked ~ .tabs > div:nth-of-type(2),
#tabNav3:checked ~ .tabs > div:nth-of-type(3),
#tabNav4:checked ~ .tabs > div:nth-of-type(4){
opacity:1;
z-index: 1000;
}
td{
padding: 5px 10px;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="tabbed">
<input type="radio" name='tabs' id="tabNav1" checked>
<label for="tabNav1">Заявка</label>
<input type="radio" name='tabs' id="tabNav2">
<label for="tabNav2">Задать вопрос</label>
<input type="radio" name='tabs' id="tabNav3">
<label for="tabNav3">Заказать звонок</label>
<input type="radio" name='tabs' id="tabNav4">
<label for="tabNav4">Оставить отзыв</label>
<div class="tabs">
<div>
<form action="">
<table>
<tr>
<td>Раздел* :</td>
<td>
<select name="razdely">
<option value="fasadpanel">Фасадные панели</option>
<option value="sayding">Сайдинг</option>
<option value="soffity">Соффиты</option>
<option value="ventfasady">Вент. фасады</option>
<option value="krovlya">Кровля</option>
<option value="sandvich">Сэндвич панели</option>
<option value="vodostochka">Водосточная система</option>
<option value="drenazh">Дренажные каналы</option>
<option value="bvd">Быстровозводимые дома</option>
<option value="angary">Ангары</option>
<option value="profnastil">Профнастил</option>
<option value="profil">Профиль</option>
<option value="fibrovolokno">Фиброволокно</option>
<option value="parogidro">Парогидроизоляция</option>
<option value="zabori">Заборы</option>
<option value="metall">Металл</option>
<option value="osb">OSB-3</option>
</select>
</td>
<td>Город :</td>
<td>
<select name="goroda" id="">
<option value="">Алматы</option>
<option value="">Астана</option>
<option value="">Шымкент</option>
<option value="">Караганда</option>
<option value="">Актобе</option>
<option value="">Тараз</option>
<option value="">Павлодар</option>
<option value="">Усть-Каменогорск</option>
<option value="">Семей</option>
<option value="">Костанай</option>
<option value="">Уральск</option>
<option value="">Петропавловск</option>
<option value="">Кызылорда</option>
<option value="">Атырау</option>
<option value="">Актау</option>
<option value="">Темиртау</option>
<option value="">Кокшетау</option>
<option value="">Талдыкорган</option>
<option value="">Экибастуз</option>
<option value="">Рудный</option>
<option value="">Другой...</option>
</select>
</td>
</tr>
<tr>
<td>Имя* :</td>
<td><input type="text" value='Иванов Иван Иванович'></td>
<td>Телефон* :</td>
<td><input type="text" value='+7 727 390-26-60'</td>
</tr>
<tr>
<td>E-mail* :</td>
<td><input type="text" value="insi-almaty@mail.ru"></td>
</tr>
<tr>
<td>Сообщение* :</td>
</tr>
<tr>
<td>
<textarea name="" id="" cols="25" rows="5">Здравствуйте</textarea> </td>
<td colspan='2'>
Вы можете прикрепить к заявке файл(не более 3 мегабайт)<input type="file" name='f_file'></td>
</tr>
</table>
</form>
</div>
<div>
<h1>Задать вопрос</h1>
</div>
<div>
<h1>Заказать звонок</h1>
</div>
<div>
<h1>Оставить отзыв</h1>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>