文本框中的占位符和光标对齐对齐方式

Question

我有一个包含文本框的HTML“表单”，这里我们展示了一些占位符（默认文本）。

根据requiremnet默认文本显示为中心对齐。一旦我们居中对齐的光标也显示中心本身。是否有任何解决方案显示光标开始本身（左对齐）和占位符中心对齐。

占位符和光标对准

Answer 1

您可以通过jQuery的

<script> 
    $(function() { 
     $('#inputId').focus(function() { 
      $(this).css('text-align', 'left'); 
     }).blur(function() { 
      $(this).css('text-align', 'center'); 
     }); 
    }); 
</script> 

Answer 2

覆盖它试试这个哥们。

这里是演示http://jsfiddle.net/f0xn3wjL/2/

HTML

<input type="text" placeholder="Dummy Text" > 

使用此CSS

input{width:300px; text-align:center} 
::-webkit-input-placeholder { color:green; } 
input:focus{text-align:left; content:''} 

使用这个jQuery

$(document).ready(function(){ 

    $('input').click(function(){ 
    //alert('hi'); 
    $(':input').removeAttr('placeholder'); 
    }) 


}) 

Answer 3

重写bl2b's answer with vanilla CSS

selector { 
    text-align: center; 
} 

selector:focus { 
    text-align: left; 
}