为什么我的边框没有完全围绕文本框？

Question

我正在使用 JQuery 移动设备 css，我也有自己的 css，我只有这个：

input.error{
      border: red 2px solid;
}

我这样做是因为当用户输入无效信息时，我希望文本框周围有一个红色轮廓。问题是边框没有完全围绕文本框。这是它的外观图片。任何人都知道为什么会这样？

Answer 1

发生这种情况是因为 JQM 通过更具吸引力的容器 div 和自定义 ui-input-text class 增强了文本输入。您需要更改该父元素的 border-color 和 box-shadow。

此外，您还可以调整焦点样式，将标准的蓝色光晕更改为红色。

像这样：

$(document).on("pagecreate", "#page-one", function() {
  $("#pwd").parent().addClass("error");
  $("#pwd-confirm").parent().addClass("error");
  $('.pwd').bind('input', function() {
    var pwd = $("#pwd").val(), confirm = $("#pwd-confirm").val();
    var empty = pwd == "";
    var confirmed = !empty && pwd == confirm;
    $("#pwd").parent().toggleClass("error", empty);
    $("#pwd-confirm").parent().toggleClass("error", !confirmed);
  });
});

.ui-input-text.error  {
  border-color: rgba(255,0,0,.8) !important;
  -moz-box-shadow: inset 0 1px 3px rgba(255,0,0,.2) !important;
  -webkit-box-shadow: inset 0 1px 3px rgba(255,0,0,.2) !important;
  box-shadow: inset 0 1px 3px rgba(255,0,0,.2) !important;
}
.ui-input-text.ui-focus.error {
  -webkit-box-shadow: 0 0 12px #F00 !important;
  -moz-box-shadow: 0 0 12px #F00 !important;
  box-shadow: 0 0 12px #F00 !important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
  <div role="main" class="ui-content">
    <input id="pwd" type="text" class="pwd" placeholder="Enter Password">
    <input id="pwd-confirm" type="text" class="pwd" placeholder="Confirm Password">
  </div>
</div>
</body>
</html>

为什么我的边框没有完全围绕文本框？

Why is my border not going around the textbox fully?

css

textbox

input

border

jquery-mobile