Попытка добавить поле слева в поле ввода - PullRequest
Новая
       23

Попытка добавить поле слева в поле ввода

0 голосов
/ 19 октября 2018

Я унаследовал устаревшую кодовую базу, и мне поручено переопределить несколько CSS-селекторов (среди прочего).Просто.Но я столкнулся со странным идентификатором, который я не могу понять, как переопределить.

Вот фрагмент кода: 

<form id="formInfo" name="formInfo" method="post">
  <label>Phone Number*</label>
  (
  <input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
  ) -
  <input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">  
</form>

Все, что я пытаюсь сделать, это добавить 10px поля слева от последнего ввода, чтобы два поля не сталкивались друг с другом.

Я незнаком с этим синтаксисом.Я никогда не видел идентификаторов, соединенных двоеточием (:) раньше.

Вот что я пробовал: 

#formInfo:phoneSuffix {
    margin-left: 10px;
}

#phoneSuffix {
    margin-left: 10px;
}

#formInfo #phoneSuffix {
    margin-left: 10px;
}

Как и ожидалось, ни один из этих подходов не добавляет желаемого поля.

Любая помощь приветствуется.

Вот моя скрипка , если вы хотите работать с этим.

Ограничения: Как я уже сказал, это устаревший код.К сожалению, у меня нет возможности изменить или добавить в разметку.Это SPA, который используется в нескольких приложениях.Изменение может привести к непреднамеренным побочным эффектам.Я должен иметь дело с этим как часть моего SPA и переопределить поля ввода.Не идеал, но вот так.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 19 октября 2018

Ваши коды должны быть: 

#formInfo[name="phoneSuffix"] {
  margin-left: 10px
}

- 

<form id="formInfo" name="formInfo" method="post">
  <label>Phone Number*</label>
  (
  <input id="formInfo" name="areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
  ) -
  <input id="formInfo" name="phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo" name="phoneSuffix" type="text" value="" maxlength="4" size="4">  
</form>

Рабочий пример.

0 голосов
/ 19 октября 2018

Вы можете использовать обратную косую черту для экранирования двоеточия 

#formInfo\:phoneSuffix {
    margin-left: 10px;
}

См .: Обработка двоеточия в идентификаторе элемента в селекторе CSS

0 голосов
/ 19 октября 2018

Вы можете использовать селектор атрибутов . 

[id='formInfo:phoneSuffix'] {
  margin-left: 10px;
}
<form id="formInfo" name="formInfo" method="post">
  <label>Phone Number*</label>
  (
  <input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
  ) -
  <input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">  
</form>
...