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

Question

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

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

占位符和光标对齐

Answer 1

您可以通过jquery

覆盖它

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

Answer 2

试试这个Dude。

以下是演示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

使用vanilla CSS重写bl2b's answer

selector {
    text-align: center;
}

selector:focus {
    text-align: left;
}