0

Here is the html code

<div class="field">
    <label for="billing:region_id" class="">
        <em style="display: none;">*</em>city
    </label>
    <div class="input-box">
        <select id="billing:region_id" name="billing[region_id]" title="縣市" class="" style="display: none;" defaultvalue="">
            <option value="">please select</option>
        </select>
        <script type="text/javascript">
            //<![CDATA[
            $('billing:region_id').setAttribute('defaultValue',  "");
            //]]>
        </script>
        <input type="text" id="billing:region" name="billing[region]" value="" title="region" class="input-text">
    </div>
</div>

I want to hide the 

<input type="text" id="billing:region" name="billing[region]" value="" title="region" class="input-text">

with the css

#billing:region 
{
    display: none;
}

but it does not work. Anyone know what the problem is?

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
hkguile
  • 4,235
  • 17
  • 68
  • 139

1 Answers1

3

You need to use slash for meta character:

#billing\:region {
    display: none;
}

see more here

Comment response:

Like this?

[for="billing\:region"]{
    display: none;
}
Community
  • 1
  • 1
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • @hkinterview Since `for` is an attribute, you can use [CSS attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) to select based on element attributes. The `\:` escaping would still apply for attribute selectors, since the `\ ` escaping metacharacter is a universal selector rule. – ajp15243 Apr 28 '14 at 04:02