Search code examples
cssjquery-mobileinputtextboxborder

Why is my border not going around the textbox fully?

I am using the JQuery Mobile css and I also have my own css and in it all i have is this: 

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

I do this because I want a red outline around the textbox when the user inputs invalid information. Problem is the border isnt going around the textbox fully. Heres a picture of what it looks like. Anyone have any idea why this is happening? enter image description here

Solution

  • This happens because text inputs are enhanced by JQM through a more attractive container div and a custom ui-input-text class. You need to change the border-color and box-shadow of that parent element.

    Moreover, You can also adjust the focused style, changing the standard blue halo to red.

    Something like this:

    $(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>