Trying to add margin-left to input field

Question

I've inherited a legacy codebase and am tasked with overriding a handful of CSS selectors (among other things). Simple. But I've encountered a weird ID that I can't figure out how to override.

Here's a code snippet:

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

All I'm trying to do is add 10px of margin to the left of the last input so the two fields aren't butted up against one another.

I'm unfamiliar with this syntax. I've never seen IDs conjoined with a colon (:) before.

Here's what I've tried:

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

#phoneSuffix {
    margin-left: 10px;
}

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

As expected, none of these approaches adds the desired margin.

Here's my fiddle if you want to work from that.

Restrictions: As I said, this is legacy code. Unfortunately, I don't have the ability to change or add to the markup. This is a SPA that is used in multiple applications. Changing it might have unintended side effects. I have to deal with it as part of my SPA and override the input margins. Not ideal, but that's the situation.

Have you tried using !important? – Smokey Dawson Oct 18 '18 at 22:44 — Smokey Dawson, Oct 18 '18 at 22:44

score 2 · Accepted Answer · answered Oct 18 '18 at 22:54

2

You could use backslash to escape the colon

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

See: Handling a colon in an element ID in a CSS selector

answered Oct 18 '18 at 22:54

Justin Frost

46
1
2

score 1 · Answer 2 · answered Oct 18 '18 at 22:43

You could use an 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>

Trying to add margin-left to input field

2 Answers2