Text-Align: Right; Only for Placeholder

text-align: right; only for placeholder?

/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }

Placeholder text-align

Your selector input[placeholder="Required"] selects an input with a placeholder attribute, not the placeholder itself.

Use the selectors given in your example:

input::-webkit-input-placeholder {
  text-align: right;
}
input::-moz-placeholder {
  text-align: right;
}
input::-ms-input-placeholder {
  text-align: right;
}
input::placeholder {
  text-align: right;
}

<form method="post">
  <div class="blocks">
    <label for="fullname">Full Name</label>
    <input type="text" id="fullname" name="name" placeholder="Required">
  </div>
  <div class="blocks">
    <label for="Email">Email Address</label>
    <input type="Email" id="Email" name="email" placeholder="Required">
  </div>
</form>

How to center placeholder/input text in an input field, but keep the cursor left aligned

You can easily do this considering :placeholder-shown. No need for JS

input {

  text-align: center;

  width: 60px;

}

::placeholder {

  text-align: center;

}

input:placeholder-shown {

  text-align: left;

}

<input type="text" placeholder="hello">

Align placeholder inside text field HTML

I've found answer by myself! :D

So, I just changed <input> to <textarea>. With a little CSS it looks completely same as input field.

Very much thanks for everyone who tried to help me!

Change a text input's placeholder with Bootstrap4

I don't think there is a bootstrapish way to do that. But you can change alignment for placeholder only with the following CSS:

::-webkit-input-placeholder { /* chrome, safari */
   text-align: right;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: right;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: right;  
}

:-ms-input-placeholder {  /* Internet Explorer */
   text-align: right; 
}

How to align text inside a placeholder

Shruti

Check solution

If you satisfied please give me vote as a gift :)

$(document).ready(function(){

  $("input").click(function(){

   $("label").hide();

  });

  $("input").focusout(function(){

         if($(this).val() !=''){

    

    } else{

     $("label").show();

    }

    

    

     });

 });

p{position: relative; display: inline-block;}

 label[for="english"] { position: absolute;left: 4px;}

 label[for="spanish"] {position: absolute; right: 4px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<p>

<label for="english">Name </label>

<label for="spanish">Nombre</label>

<input type="text" nam="name">

</p>

---

Related Topics