设置文本的边框而不是输入字段答案

【问题标题】：Set border of the text rather than the input field设置文本的边框而不是输入字段
【发布时间】：2017-08-13 21:21:35
【问题描述】：

我有一个input 字段，我想在其文本上制作悬停效果：当鼠标在其上时，使其文本的底部边框变为彩色.

下面的代码使整个输入框的底部边框变成彩色的。

以下代码适用于value2，它不是input。

有谁知道如何处理输入中的文本，而不是输入字段？

<!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>

【问题讨论】：

标签： javascript jquery css angularjs html-input

【解决方案1】：

您可以使用 border-bottom 代替：

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

请注意，浏览器支持是有限的。看： http://caniuse.com/#search=text-decoration-color

【讨论】：

为什么颜色总是black？ JSBin
需要browser support
是的，我刚刚看到最新版本中刚刚添加了对 chrome 的支持。 caniuse.com/#search=text-decoration-color
该页面将是公开的，我将无法更改访问者的设置，所以这个text-decoration-color 解决方案不适合我的情况...

【解决方案2】：

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

【讨论】：