How to hide element with css with specific title?

Question

I want to hide this input element. In fact I have few of them and I have to use their names.

<input type="image" alt="Storage Administration" src="App_Themes/Default/topmenu$store$png$ffffff$000000.IconHandler.axd" title="Storage Administration" id="ctl00_ctl00_TopMenuCph_btnAdm" name="ctl00$ctl00$TopMenuCph$btnAdm">

Could someone suggest how to use full title or alt?

[title ~= "Storage"] { 
    display: none; 
} 

That works well but, this doesn't work in firefox and chrome.

[title ~= "Storage Administration"] { 
    display: none; 
}

If I cannot use the full title, then how can I narrow the selection if the input element in inside .topMenu > div > li?

<ul class="topMenu">
    <div id="ctl00_ctl00_TopMenuCph_panTab">
        <li><input type="image" alt="Storage Administration" src="App_Themes/Default/topmenu$store$png$ffffff$000000.IconHandler.axd" title="Storage Administration" id="ctl00_ctl00_TopMenuCph_btnAdm" name="ctl00$ctl00$TopMenuCph$btnAdm"></li>
        <li><input type="image" alt="Envelope Templates" src="App_Themes/Default/topmenu$envelope$png$ffffff$000000.IconHandler.axd" title="Envelope Templates" id="ctl00_ctl00_TopMenuCph_btnEnv" name="ctl00$ctl00$TopMenuCph$btnEnv"></li>
        <li><input type="image" alt="My Documents" src="App_Themes/Default/topmenu$mydocuments$png$ffffff$000000.IconHandler.axd" title="My Documents" id="ctl00_ctl00_TopMenuCph_btnMyD" name="ctl00$ctl00$TopMenuCph$btnMyD"></li>
    </div>
</ul>

Answer 1

The attribute selector that you are using doesn't work the way you are expecting it to work. When you put [title~="Storage Administration"], CSS is looking for elements that have a title of either exactly "Storage" or exactly "Administration".CSS will not match anything.

Take a look at the attribute selector spec for a more thorough description:

http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

If you want to look, specifically, for elements with "Storage Administration" as the title attribute, then use [title="Storage Administration"]. Note that the ~ (tilde) is removed from the equation.

In CSS3, there are some additional attribute selectors, such as the *= substring match (see: spec on CSS3 selectors). Other people are trying similar things in this other StackOverflow answer.

Here's an example using their logic. No idea if this works for you, but play around with these other options. Be sure to check browser compatibility, as I'm not sure what the support is for these yet.

[title^='Storage'], [title*=' Storage']{
    display: none;
}