html - color - text-align: right; solo para placeholder?

select placeholder css

Question

cómo se puede text-align: right; activo text-align: right; solo para placeholder?

<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">

Quiero uso de la direction: ltr; para el texto (que se escribió para ingresar), y text-align: right; para el marcador de posición.

Answer 1

¿Intentaste agregarlo en el estilo?

<input type="text" name="airline_search" style="direction: ltr; text-align: right; border: none;" placeholder="ارلاین">

o simplemente configurar un div exterior como este:

<div style="direction: rtl;">
<input type="text" name="airline_search" style="text-align: right; border: none;" placeholder="ارلاین">
</div>

Deberia trabajar.

Answer 2

El puesto de Villi Katrih es correcto, pero falla en la dirección. Deberías usar:

dirección: rtl; alineación de texto: izquierda;

La ''dirección'' afecta la ubicación del texto del marcador de posición, mientras que la ''alineación del texto'' afecta al contenido de la entrada.

<input type="text" placeholder="Sample" style="direction: rtl; text-align: left;">

HTH.

Answer 3

Es mejor establecer el estilo CSS para el marcador de posición como se menciona a @Hnatt. Lo uso estableciendo la dirección y una lista completa de selectores para navegadores conocidos es

::-webkit-input-placeholder { /* WebKit browsers */
direction: rtl;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
direction: rtl;
}
::-moz-placeholder { /* Mozilla Firefox 19+ but I''m not sure about working */
direction: rtl;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
direction: rtl;
}

Espero que esto ayude. Por favor, marque como respuesta si esto es.

Answer 4

O inténtalo con un :focus evento de :focus :

input[type=''text'']{
text-align:right;
}
input[type=''text'']:focus{
text-align:left;
}

De esta manera, cualquier marcador de posición, incluso el código duro, se mantendrá a la derecha, y cualquier texto que escriba cuando esté enfocado estará en la derecha. Por otro lado, cuando pierdes el enfoque, la alineación vuelve a ser correcta.

Answer 5

Puede utilizar este código. De este modo, puede utilizar la entrada en la dirección real de forma automática y disfrutar de usar el marcador de posición correcto de rtl.

//jQuery
(function($) {
$.fn.dir_auto = function() {
var selector = ''.inputs-nyn[dir="auto"]'';
var sclass = "auto-nyn05";
var ftime = true;
if ( $(selector).length ) {
$(document).on("keyup", selector , function() {
if( ftime || !$(this).val() ){
if( !$(this).val() ){
$(this).addClass(sclass);
ftime = true;
}
else{
$(this).removeClass(sclass);
ftime = false;
}
}
});
}
};
})(jQuery);
$(document).ready(function() {
$.fn.dir_auto();
});

//css
body{
direction: rtl;
}
.inputs-nyn.auto-nyn05[dir="auto"] {
direction: rtl;
}
.inputs-nyn[dir="auto"]::placeholder {
text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- HTML -->
<input class="inputs-nyn auto-nyn05" dir="auto" placeholder="ارلاین" type="text">

Answer 6

usando inline-jquery

onkeyup="if($(this).val()==''''){ $(this).css({''text-align'':''right''})} else{ $(this).css({''text-align'':''left''})}"

Demo

Answer 7

::placeholder pseudo-elemento ::placeholder sigue siendo un borrador de trabajo y tiene un número muy limitado de propiedades CSS compatibles.

Todas las propiedades que se aplican al :: pseudo-elemento de primera línea también se aplican al :: pseudo-elemento de marcador de posición.

No se especifican propiedades adicionales, pero se ha observado que a las personas les gustaría que se apoyara el text-align .

Por lo tanto, de la lista bastante pequeña de propiedades admitidas (que se encuentra aquí) , la única forma correcta de lograr esto sería si el texto del marcador de posición tuviera solo una palabra. Esto le permitiría aprovechar la propiedad de word-spacing admitida prefijando un carácter y luego ocultarlo.

Probablemente esto no funciona porque no usa prefijos de navegador.

input {
width: 200px;
background-color: #fff!important;
}
input::placholder {
word-spacing: 155px;
}
input::placholder:first-letter {
color: #fff!important;
}

<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">

Esto debería funcionar

input {
width: 200px;
background-color: #fff!important;
}
input::placholder {
word-spacing: 155px;
}
input::placholder::first-letter {
color: #fff!important;
}
/* browser support */
input::-webkit-input-placeholder {
word-spacing: 155px;
}
input:-moz-placeholder {
word-spacing: 155px;
}
input::-moz-placeholder {
word-spacing: 155px;
}
input:-ms-input-placeholder {
word-spacing: 155px;
}
input::-webkit-input-placeholder::first-letter {
color: #fff!important;
}
input:-moz-placeholder:first-letter {
color: #fff!important;
}
input::-moz-placeholder::first-letter {
color: #fff!important;
}
input:-ms-input-placeholder::first-letter {
color: #fff!important;
}

<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">

Pero como los navegadores admiten cosas que no deberían y no admiten, deberían intentar esto.

Esto no se supone que funcione.

input::-webkit-input-placeholder {
/* WebKit browsers */
text-align: right;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
text-align: right;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ but I''m not sure about working */
text-align: right;
}
input:-ms-input-placeholder {
/* Internet Explorer 10 */
text-align: right;
}
input::placeholder {
text-align: right;
}

<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">

Para tu información direction: ltr; administra la posición del cursor y el flujo de texto, ya que un marcador de posición no tiene un cursor o texto editable que no hará nada.

Answer 8

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

Answer 9

input::-webkit-input-placeholder {
direction: rtl;
text-align: left;
}