0

I have an input field, I want to make a hover effect on its text: make the bottom border of its text colourful when the mouse is on it.

The following code makes the bottom border of the entire input field colourful.

The following code works fine for value2, which is not an input.

Does anyone know how to work on the text inside the input, rather than the input field?

JSBin

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <style>
    input {
      font-size: 20px;
      border:none;
      display: inline-block;
      background-color:transparent;
    }
    .item {
        font-size: 20px;
        display: inline-block;
    }
    input:hover, .item:hover {
      border-bottom: 2px solid #42b983;
    }
  </style>
</head>
<body ng-app="app" ng-controller="Ctrl">
  <input type="text" ng-model="value1">
  <br/>
  <div class="item">{{value2}}</div>
  <script>
    var app = angular.module('app', []);
    app.controller('Ctrl', ['$scope', function ($scope) {
      $scope.value1 = "value1";
      $scope.value2 = "value2"
    }])
  </script>
</body>
</html>
SoftTimur
  • 5,630
  • 38
  • 140
  • 292

2 Answers2

1

Instead of border-bottom you could use:

 input:hover {
  text-decoration: underline;
  -webkit-text-decoration-color: red;
  -moz-text-decoration-color: red;
  text-decoration-color: red;
}

Note that browser support is limited. See: http://caniuse.com/#search=text-decoration-color

Yonatan Shippin
  • 161
  • 1
  • 9
  • Why the colour is always `black`? [JSBin](https://jsbin.com/kuvinaneto/1/edit?html,output) – SoftTimur Mar 21 '17 at 23:51
  • 1
    It's red for me on Chrome & Firefox when looking at your fiddle with my additions. – Yonatan Shippin Mar 21 '17 at 23:55
  • 1
    It requires a [browser support](http://stackoverflow.com/a/21599113/702977) – SoftTimur Mar 22 '17 at 00:19
  • Yes I just saw support was just added for chrome in the latest version. http://caniuse.com/#search=text-decoration-color – Yonatan Shippin Mar 22 '17 at 00:22
  • The page will be public and I will not be able to change the setting of visitors, so this `text-decoration-color` solution does not suit my case... – SoftTimur Mar 22 '17 at 00:24
  • I think you will have to resort to JS then. A way around it would be to create another text field positioned exactly at the same place, that would mirror the typed text. This field will have a different color to the text - but it will be hidden "below" the current field, so only the underline would be visible by the user. – Yonatan Shippin Mar 22 '17 at 00:31
0
input:hover {
    text-decoration: underline;
    -moz-text-decoration-color: #42b983; /* Code for Firefox */
    text-decoration-color: #42b983;
}
joegod86
  • 20
  • 1
  • 3