設置文本的邊框而不是輸入字段

Question

我有一個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>

Answer 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

Answer 2

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

設置文本的邊框而不是輸入字段

問題描述

2 個解決方案

解決方案1
1 2017-03-21 23:46:44

解決方案2
0 2017-03-21 23:48:19

設置文本的邊框而不是輸入字段

問題描述

2 個解決方案

解決方案1 1 2017-03-21 23:46:44

解決方案2 0 2017-03-21 23:48:19

解決方案1
1 2017-03-21 23:46:44

解決方案2
0 2017-03-21 23:48:19