5

I have a simple question.

I would like to give an "all" animation to a text area, however I do not want it to animate the text shadow on focus.

How can I make exceptions when I'm using the following:

input[type=text]:focus {
    background: #fff;
    text-shadow: none;
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
}
RadicalActi
  • 151
  • 1
  • 4
  • 11
  • 2
    Why don't you just leave the `text-shadow` property untouched? – Patrick Kostjens Jul 25 '13 at 20:39
  • Because when people click on the textbox, all of the text will be highlighted by jQuery in the textbox and it looks kinda bad, that a text with shadow is highlighted. – RadicalActi Jul 25 '13 at 20:41
  • Possible duplicate of [How do I apply CSS3 transition to all properties except background-position?](https://stackoverflow.com/questions/10604389/how-do-i-apply-css3-transition-to-all-properties-except-background-position) – Damjan Pavlica Oct 17 '17 at 23:38

2 Answers2

8

You can also write like this, if you don't want overwrite the transition property :

input[type=text]:focus {
background: #fff;
transition:all 0.5s, text-shadow 0s;
-webkit-transition:all 0.5s, text-shadow 0s;
-moz-transition:all 0.5s, text-shadow 0s;
}
Samuel Pelletier
  • 91
  • 1
  • 3
0

This is actually pretty simple, just set the rule for all of them, then set it again for just the text-shadow:

input[type=text]:focus {
    background: #fff;
    text-shadow: none;
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:text-shadow 0s;
    -webkit-transition:text-shadow 0s;
    -moz-transition:text-shadow 0s;
}

With this code, if you change the text-shadow, it will instantly change, rather than animate. Like @Patrick commented, if you dont want the text-shadow to change at all, then make sure you don't edit that property.

Optox
  • 630
  • 4
  • 9