Блог

Главная - Вопросы по программированию - Метка по-прежнему занимает место при абсолютном расположении

Метка по-прежнему занимает место при абсолютном расположении

#html #css #forms #input

#HTML #css #формы #ввод

Вопрос:

У меня есть плагин проверки javascript, который используется слишком во многих местах для замены. Он вставляет метку после ввода, который он проверяет. Текущая непроверенная разметка и изображение ниже:

Хотелось бы показать изображения, но, думаю, я пока не могу. 

 <div id="gender-select">
    <label id="gender">Gender</label>
        <input class="male required radioBtn gender-hide" type="radio" name="gender" value="1" id="male">
        <label for="male"></label>
        <input class="female required radioBtn gender-hide" type="radio" name="gender" value="2" id="female">
        <label for="female"></label>
</div>

Это код после выполнения проверки, и ввод для gender неверен.

 <div id="gender-select">
    <label id="gender">Gender</label>
       <input class="male required radioBtn gender-hide error" type="radio" name="gender" value="1" id="male">
       <label for="gender" generated="true" class="error">Mandatory</label>
       <label for="male"></label>
       <input class="female required radioBtn gender-hide error" type="radio" name="gender" value="2" id="female">
       <label for="female"></label>
</div>

Текущий CSS

 #join-page #form-content input[type="radio"] {
position: absolute;
left: -8000px;
}

#join-page #form-content input {
background: #f4f4f4;
height: 40px;
border: none;
padding: 0 2%;
width: 100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-size: 16px;
color: #a2a2a2;
}

#join-page #form-content input[type="radio"]   label {
background: url('/App_Presentation/responsive/OpinionMilesClub/img/omc-genderRadio.png') 0px 0px no-repeat;
cursor: pointer;
height: 40px;
width: 30px;
}

#join-page #form-content label.error[for="gender"] {
position: absolute;
top: -11px;
left: 0px;
}

#join-page #form-content input[type="radio"]   label[for="female"] {
margin-left: -4px;
background: url('/App_Presentation/responsive/OpinionMilesClub/img/omc-genderRadio.png') 31px 0px;
}

Я не понимаю, почему метка все еще занимает место? У кого-нибудь есть идеи…

Комментарии:

1. Вы хотите, чтобы пробел и метка исчезли или вы просто хотите, чтобы метка исчезла?

2. Я просто хочу, чтобы метка действовала как любой другой элемент, когда она абсолютно расположена. Когда он появляется, он перемещает надпись под ним. Это вообще не должно на это влиять.

3. Пожалуйста, включите свой javascript-код