CODEWITHSUNDEEP
javascriptjquerycssangularjshtml-input
SoftTimur
SoftTimur

Reputation: 5520

Set border of the text rather than the input field

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>

Upvotes: 0

Views: 70

Answers (2)

Yonatan Shippin
Yonatan Shippin

Reputation: 171

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

Upvotes: 1

joegod86
joegod86

Reputation: 20

input:hover {
    text-decoration: underline;
    -moz-text-decoration-color: #42b983; /* Code for Firefox */
    text-decoration-color: #42b983;
}

Upvotes: 0

Related Questions