Bootstrap text align: Empty input left - Filled input right

Question

Has Bootstrap a built in feature to align the placeholder in an empty text-input on the left, and if the user enters a number (→ filled input) to the right.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-group">
  <div class="input-group">
    <input class="form-control" maxlength="255" placeholder="Amount" name="amount" type="text" value="" id="amount">
    <span class="input-group-addon financing">€</span>
  </div>
</div>

There is no selector in `CSS` which does this. Attribute selectors match attribute values, not computed values. `CSS `has no `(pseudo)` selectors for `input` value(s). You would have to use JavaScript. — vivekkupadhyay, Mar 03 '17 at 08:40
http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no — Banzay, Mar 03 '17 at 08:41

score 3 · Accepted Answer · answered Mar 03 '17 at 08:44

3

I think that it may be this what you are looking for.

$('#amount').on('keyup', function(){
if($('#amount').val().length > 0)
  $('#amount').css('text-align', 'right');
else
  $('#amount').css('text-align', 'left');
});

http://codepen.io/powaznypowazny/pen/JWXvYE

answered Mar 03 '17 at 08:44

Kuba Wojtach

541
3
10

Neat solution, but I personally find the slight "lag" as the JS kicks in a little distracting, I would go with rtl, but voted this up as it is technically the "correct" answer – mayersdesign Mar 03 '17 at 08:51
Thanks, but 'rtl' does not do the job with the text-align setting :) – Kuba Wojtach Mar 03 '17 at 08:53
As [@banzay](http://stackoverflow.com/users/4206079/banzay) mentioned [in this comment](http://stackoverflow.com/questions/42574077/bootstrap-text-align-empty-input-left-filled-input-right/42574283#comment72281450_42574077): CSS cannot check the userinput in input fields - so there is NO CSS solution. I think this JS-solution will do the trick. Thanks. – SUhrmann Mar 03 '17 at 08:53

score 0 · Answer 2 · answered Mar 03 '17 at 08:39

No Bootstrap does not have this built in but input dir="rtl" might be close enough?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-group">
  <div class="input-group">
    <input dir="rtl" class="form-control" maxlength="255" placeholder="Amount" name="amount" type="text" value="" id="amount">
    <span class="input-group-addon financing">€</span>
  </div>
</div>

I know, I said it might be near enough, given any other course of action is going to be javascript heavy. Thanks for tedious comment of the day :) — mayersdesign, Mar 03 '17 at 08:50

score 0 · Answer 3 · answered Mar 03 '17 at 08:53

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
 $("#amount").keyup(function(){
  
  var val = $(this).val();
  
  if(val == ''){
   $(this).css('text-align','right');
  }else{
   $(this).css('text-align','left'); 
  }
  
 })
})
 
 
</script>

easy to use jquery

score -1 · Answer 4 · answered Mar 03 '17 at 08:43

-1

Just use dir="rtl" in your input

<input dir="rtl" placeholder="Amount" name="amount" type="text">

answered Mar 03 '17 at 08:43

Saravana Kumar

23
10

Bootstrap text align: Empty input left - Filled input right

4 Answers4