爲什麼邊框沒有在輸入字段上設置？

我嘗試在我的輸入字段中添加邊框。我能夠在文本字段上添加邊框，但是它適用於整個部分。我只需要將邊框添加到輸入字段，直到字符開始滾動。換句話說，如果您開始在輸入字段開始鍵入幾個字符開始水平滾動後，我需要添加邊框，而不是整個輸入寬度。爲什麼邊框沒有在輸入字段上設置？

這裏是我的代碼 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>

我添加類「BDR」

來源

2015-04-21 user944513

您的bdr課程在哪裏？你在哪裏調用樣式表？ –

請檢查我的代碼我在css上添加該類http://codepen.io/anon/pen/oXvKeb – user944513

您無法輸入您希望的字段。但你可以編寫自定義代碼來實現你所期望的 –

我想你可以通過使用ng-class和ng-change做到這一點。

文本字段應該是

添加一些代碼在你的控制器

 $scope.customClassName=undefined; 
    $scope.changeBorder=function(){ 
     $scope.customClassName=undefined; 
     if(user.username.length>1){ 
     $scope.customClassName="bdr"; 
     }  
}

如果您在輸入字段寫入任何值，則該函數將執行和檢查車況，最後更新ng-class爲您的原始課程:)

來源

2015-04-21 09:09:27

爲什麼邊框沒有在輸入字段上設置？

回答

相關問題