Question

在focus上，textbox的大小似乎缩小/缩小。但是，如果border-width设置为2px，则无法观察到此类减少。我想将border-width设置为1px，但没有像效果这样的减少。怎么办呢？

#name:focus{
	outline:none;
	border:1px solid rgba(81, 203, 238, 1);
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

#name2:focus{
	outline:none;
	border:2px solid rgba(81, 203, 238, 1);
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

<!doctype  html>
<html>
<head>
</head>
<body>
  Border-width changes to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

Answer 1

这里有多种方法。例如，您可以将默认边框宽度设置为1px（#name2）或增加焦点上的填充（#name）。

＆＃13;

#name2 {
    border:1px solid rgba(81, 203, 238, 1);
}
#name2:focus,
#name:focus{
    outline:none;
    border:1px solid rgba(81, 203, 238, 1);
    box-shadow:0 0 5px rgba(81, 203, 238, 1);
}
#name:focus{
    padding: 2px;
}

＆＃13;

<!doctype  html>
<html>
<head>
</head>
<body>
  Padding changes to 2px on focus<br>
  Padding <input type="text" id='name'><br>
  Border default is set to 1px<br>

  Border <input type="text" id='name2'><br>
  Check <input type="text" id='check'>
</body>
</html>

＆＃13;

Answer 2

试试这个

＆＃13;

#name:focus{
	outline:none;
	border-color:rgba(81, 203, 238, 1);
        border-style: ridge;
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

#name2:focus{
	outline:none;
	border-color:rgba(81, 203, 238, 1);
        border-style: ridge;
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

＆＃13;

<!doctype  html>
<html>
<head>
</head>
<body>
  Border-width changes to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

＆＃13;

Answer 3

这个问题可以通过在padding上引入boxes来解决，因为focus必须添加对padding:2px的影响。
我在默认设置中添加了Padding:2px。 focus也可以添加snippet，但只能通过添加默认设置来解决您的问题。看看#name:focus{ outline:none; border:1px solid rgba(81, 203, 238, 1); box-shadow:0 0 5px rgba(81, 203, 238, 1); padding: 2px; } #name2:focus{ outline:none; border:2px solid rgba(81, 203, 238, 1); box-shadow:0 0 5px rgba(81, 203, 238, 1); }。

<!doctype  html>
<html>
<head>
</head>
<body>
  Border-width changes to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

<body ng-app="anchorScrollExample">
  <div id="scrollArea" ng-controller="ScrollController">
  <a ng-click="gotoBottom()">Go to bottom</a>
  <a id="bottom"></a> You're at the bottom!
</div>
</body>


angular.module('anchorScrollExample', [])
  .controller('ScrollController', ['$scope', '$location', '$anchorScroll',
    function ($scope, $location, $anchorScroll) {
      $scope.gotoBottom = function() {
        // set the location.hash to the id of
        // the element you wish to scroll to.
        $location.hash('bottom');

        // call $anchorScroll()
        $anchorScroll();
      };
    }]);
})(window.angular);

文本框大小缩小/缩小焦点

3 个答案: