Question

我正在使用JQuery Mobile css，我也拥有自己的css，其中我只有这个：

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

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

Answer 1

这是因为JQM通过更具吸引力的容器div和自定义ui-input-text类增强了文本输入。您需要更改该父元素的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>

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

1 个答案: