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,155
  • 14
  • 29
  • 44
hkguile
  • 3,937
  • 14
  • 64
  • 128

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
  • 78,842
  • 31
  • 152
  • 211
  • @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