Question

我有<span class="min-max"> <input class="min-max-input" type="number" ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')" ng-model-options="{debounce: 500}" ng-model="$ctrl.text"> </span>包含输入：

＆＃13;

{{1}}

＆＃13;

现在，当我点击内部时，视觉部分没有任何变化。我想要的是有一个亮点或类似的东西，如将文本框的边框颜色更改为淡蓝色。

有什么建议吗？

Answer 1

使用此CSS样式规则：

 Route::get('/dashboard', function () {
        return view('main/sub.index');
    });

outline与border的不同之处在于.min-max-input:focus { outline: 3px ridge cyan }长度在测量中计算，border不是outline。除了你不需要记住将它包含在测量尺寸中这一事实外，当它出现和消失时不会发生变化。伪类:focus在较小程度上与focus event类似。

演示

＆＃13;

input {
  font: inherit;
  display: inline-block;
  margin: 5px auto
}

/* box-shadow optional */

.min-max-input:focus {
  outline: 3px ridge cyan;
  box-shadow: 1px 1px 3px 4px rgba(0, 187, 150, 0.5);
}

.min-max-input.sangre:focus {
  outline: 3px ridge tomato;
  box-shadow: 1px 1px 3px 4px rgba(235, 66, 48, 0.5);
}

.min-max-input.verdant:focus {
  outline: 3px ridge lime;
  box-shadow: 1px 1px 3px 4px rgba(111, 255, 111, 0.5);
}

.min-max-input.flaxen:focus {
  outline: 3px ridge gold;
  box-shadow: 1px 1px 3px 4px rgba(220, 230, 70, 0.5);
}

＆＃13;

<span class="min-max">
    <input class="min-max-input" type="number" 
           ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')"
           ng-model-options="{debounce: 500}" ng-model="$ctrl.text">
</span>

<span class="min-max">
    <input class="min-max-input sangre" type="number" 
           ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')"
           ng-model-options="{debounce: 500}" ng-model="$ctrl.text">
</span>

<span class="min-max">
    <input class="min-max-input verdant" type="number" 
           ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')"
           ng-model-options="{debounce: 500}" ng-model="$ctrl.text">
</span>

<span class="min-max">
    <input class="min-max-input flaxen" type="number" 
           ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')"
           ng-model-options="{debounce: 500}" ng-model="$ctrl.text">
</span>

＆＃13;

Answer 2

您需要使用CSS :focus伪类：

input.min-max-input:focus {
   border: 1px solid lightblue;
}

这个伪类的好处是，当元素失去焦点时，淡蓝色边框将消失，这使得它更符合标准。

在文本框内部单击文本框时更改文本框的边框颜色

2 个答案:

演示