Keep focus styling if text is present

Question

I've got an input box. I customise it in normal state and on focus.

My question is how do I keep the focus CSS styling if text is present in the input box?

.par input[type=sample]{
    width:75px;
    background-color: #000;
}
.par input[type=sample]:focus{
    width:50px;
    background-color: #FF0;
}

A certain text or just any text? CSS cannot select and style elements based on content of text boxes. — Harry, Mar 23 '16 at 11:10
It is still not straight-forward to achieve. Is your text box a mandatory field? — Harry, Mar 23 '16 at 11:11
Would something like [this](https://jsfiddle.net/hari_shanx/rr5Lxshz/) be acceptable? — Harry, Mar 23 '16 at 11:14
@Harry Thanks. It's pretty much same as mine. I want it to stay yellow if text has being typed (as per your sample) — Becky, Mar 23 '16 at 11:16
Sorry, I hadn't saved it initially. Can you check the same link again? — Harry, Mar 23 '16 at 11:17
Check http://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css — ketan, Mar 23 '16 at 11:18

score 6 · Accepted Answer · answered Mar 23 '16 at 11:21

There are no pure CSS selectors to directly select and style text boxes based on their content. But if the field is a mandatory field (that is, you could add the required attribute) then the :valid pseudo selector can be used to identify if the text box has any text type inside it or not and based on it apply the required styles.

input[type=text] {
  width: 75px;
  background-color: #000;
}
input[type=text]:focus,
input[type=text]:valid {
  width: 50px;
  background-color: #FF0;
}

<input type="text" required />
<input type="text" required />

score 0 · Answer 2 · answered Mar 23 '16 at 11:26

0

input[value=""]:focus {
    background-color: yellow;
}

<input onkeyup="this.setAttribute('value', this.value);" value="" />

another way would be to check in jquery.. using ':contains' selector

answered Mar 23 '16 at 11:26

SuperNova

25,512
7
93
64

score -1 · Answer 3 · answered Mar 23 '16 at 11:34

-1

you can have one more selector with :valid pseudo-class.

.par input[type=sample]:valid{
     width:50px;
     background-color: #FF0;
   }

answered Mar 23 '16 at 11:34

Mahesh

325
1
2
11

Keep focus styling if text is present

3 Answers3