尝试将 margin-left 添加到输入字段

Question

我继承了一个遗留代码库，我的任务是覆盖少数 CSS 选择器（以及其他事情）。简单的。但是我遇到了一个奇怪的 ID，我不知道如何覆盖它。

这是一个代码片段：

<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 的边距，这样两个字段就不会相互对接。

我不熟悉这种语法。我以前从未见过用冒号 (:) 连接的 ID。

这是我试过的方法：

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

#phoneSuffix {
    margin-left: 10px;
}

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

正如预期的那样，none 这些方法增加了所需的余量。

这里是 my fiddle 如果你想从那里开始工作。

限制：正如我所说，这是遗留代码。不幸的是，我无法更改或添加标记。这是一个在多个应用程序中使用的 SPA。更改它可能会产生意想不到的副作用。我必须将其作为我的 SPA 的一部分来处理并覆盖输入边距。不理想，但情况就是这样。

Answer 1

你可以使用 attribute selector.

[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>

Answer 2

您可以使用反斜杠来转义冒号

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

参见：Handling a colon in an element ID in a CSS selector

尝试将 margin-left 添加到输入字段

Trying to add margin-left to input field

html

css

legacy-code