CSS Don't style empty input titles

Question

I'm working with a CMS which allows you to add a tooltip to input boxes.

So this one has tooltip "Please enter your phone number".

<input name="var_customerphone" title="Please enter your phone number" />

and this one is emtpy

<input name="var_customername" title="" >

Here's my css which changes the cursor to help

input[type="text"][title] { cursor: help; }

My problem is this, the above code will show the help cursor for both inputs above, even though the second one doesn't contain any help text in the tooltip.

Is there any way to put some conditional code on the css to only show the help cursor if title is not empty?

Something along the lines of: input[type="text"][title !=""] { cursor: help; }

I have no control over the CMS so title will be outputted regardless if it contains any text or not.

thanks

You could use JavaScript to detect the empty titles and apply a class that controls the behavior of the hover state. — Harvey A. Ramer
– Harvey A. Ramer, Commented Feb 5, 2014 at 13:43

user908853 · Accepted Answer · 2014-02-05 13:44:54Z

5

Try this:

input[type="text"]:not([title=""]) { cursor: help; }

Note: According to w3schools, IE8 and earlier do not support the :not selector.

answered Feb 5, 2014 at 13:44

user908853

Sign up to request clarification or add additional context in comments.

1 Comment

DaniP Over a year ago

To improve your question add the compatibility of that selector

Fabrizio Calderan · Accepted Answer · 2014-02-05 13:46:08Z

4

Without using :not and increasing a bit compatibility with older browser (it works also on IE7):

input[type="text"][title] { 
  cursor: help; 
} 

/* revert style for empty titles */
input[type="text"][title=""] { 
  cursor: default; 
}

example: http://codepen.io/anon/pen/LdGiq

answered Feb 5, 2014 at 13:46

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

1 Comment

Fabrizio Calderan Over a year ago

you're welcome: of course :not would be my choice too, but unfortunately IE8 still has too many users

Collectives™ on Stack Overflow

CSS Don't style empty input titles

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related