CODEWITHSUNDEEP
htmlcss
Bijay Singh
Bijay Singh

Reputation: 849

change font-family of label

Please check this fiddle my fiddle (the code here is just a raw code, my actual code has some bootstrap classes)

what I am trying to achieve here is that whenever user clicks on an input box, the font-family changes.

But unfortunately it works only if label is after input. I saw in many other answers in SO, it is mentioned that there is no css way to access a preceding element. so, is there anyway to change the font-family of the label for the first two fields in the below 

<html>

<head>
  <style>
    input:focus+label {
      font-family: 'Roboto Medium', sans-serif;
      font-size: 16px;
      color: #000;
      font-weight: 500;
    }
  </style>
</head>

<body>
  <form>
    <div>
      <label for="name">username</label>
      <input type="text" name="name">
    </div>
    <div>
      <label for="email">email</label>
      <input type="email" name="email">
    </div>

    <br><br>
    <input type="text" name="color">
    <label for="color">your fav color</label>
  </form>
</body>

</html>

Upvotes: 1

Views: 20266

Answers (3)

Asons
Asons

Reputation: 87201

The simplest would be to swap them in markup and then float the label's left

This way the sibling selector + will work since the input is before the label in the markup

.swap label {
  float: left;
}

input:focus+label {
  font-family: 'Roboto Medium', sans-serif;
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
<form>
  <div class="swap">
    <input type="text" name="name">
    <label for="name">username</label>
  </div>
  <div class="swap">
    <input type="email" name="email">
    <label for="email">email</label>
  </div>

  <br>
  <br>
  <input type="text" name="color">
  <label for="color">your fav color</label>
</form>

You can also use absolute position, a padding and then put label above..

.swap {
  position: relative;
  padding-top: 20px;
}
.swap + .swap {
  margin-top: 5px;
}
.swap label {
  position: absolute;
  left: 0;
  top: 0;
}

input:focus+label {
  font-family: 'Roboto Medium', sans-serif;
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
<form>
  <div class="swap">
    <input type="text" name="name">
    <label for="name">username</label>
  </div>
  <div class="swap">
    <input type="email" name="email">
    <label for="email">email</label>
  </div>

  <br>
  <br>
  <input type="text" name="color">
  <label for="color">your fav color</label>
</form>

..or left

.swap {
  position: relative;
  padding-left: 80px;
}
.swap + .swap {
  margin-top: 5px;
}
.swap label {
  position: absolute;
  left: 0;
}

input:focus+label {
  font-family: 'Roboto Medium', sans-serif;
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
<form>
  <div class="swap">
    <input type="text" name="name">
    <label for="name">username</label>
  </div>
  <div class="swap">
    <input type="email" name="email">
    <label for="email">email</label>
  </div>

  <br>
  <br>
  <input type="text" name="color">
  <label for="color">your fav color</label>
</form>

Upvotes: 1

Nithin Charly
Nithin Charly

Reputation: 305

There is unfortunately no predecessor selector in css. This can be done if you target browsers that support flexbox - see this

HTML

 <form>
        <div class="some-container">
            <input type="text" name="name">
            <label for="name">username</label>
        </div>
        <div class="some-container">
            <input type="email" name="email">
            <label for="email">email</label>
        </div>

        <br><br>
            <input type="text" name="color">
            <label for="color">your fav color</label>
        </form>

CSS

.some-container {
            display: flex;
      align-items:center
        }
        .some-container label {
            order: 1;
      margin-right:10px;
        }
        .some-container input {
            order: 2;
      width:200px;
        }
        .some-container input:focus + label {
            font-family: 'Roboto Medium', sans-serif;
      font-size: 16px;
            color: #000;
            font-weight: 500;
        }

https://jsfiddle.net/nithincharly/j96cnas2/

Upvotes: 3

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

you cannot focus a previous element in CSS.. can be handled with JavaScript.

Upvotes: 0

Related Questions