I am attempting to add a border to my input field. I have successfully added the border to the text field, but it is being applied across the entire width. I would like the border to only appear on the input field up to where the characters start scrolling. In other words, when typing in the input field and the characters exceed the visible area, I want the border to only cover that portion, not the whole width of the input.
Here is my code: http://codepen.io/anon/pen/oXvKeb
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Sign-in, Then Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-header-bar class="bar-balanced">
<h1 class="title">Station ID</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">StationName</span>
<input type="text" ng-model="user.username" class="bdr">
</label>
</div>
</ion-content>
<ion-footer-bar class="bar-balanced">
<h1 class="title">Footer!</h1>
</ion-footer-bar>
</body>
</html>
I have added the class "bdr" for this purpose