                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS Sprite雪碧图应用

使用placeholder内容居中光标也居中了

我在输入框的样式中加了text-align:center使palceholder的内容居中,可是点击输入框的时候光标也居中了,有让光标居左的办法吗?

暮女神

2017-07-02

源自：CSS Sprite雪碧图应用 4-1

关注问题我要回答

5942

操作

收起

3 回答

么我的北海回答被采纳 +3 积分
2017-07-04

.test-input{
    width:150px;
    }
.test-input::-webkit-input-placeholder {
   padding-left:30px;
    }

0 回复有任何疑惑可以回复我~

收起回答

暮女神提问者
2017-07-03

你没弄懂我的意思,我是说让提示文字居中,点击后光标居左,提示文字还是居中

0 回复有任何疑惑可以回复我~

收起回答

么我的北海
2017-07-03

第一种方法：

设定获得焦点后的样式；

.test-input{
    width:150px;
    text-align: center;
}
.test-input:focus{
    text-align: left;
}

第二种方法：

利用padding 使文字居中；

  .test-input{
        width:70px;
        padding: 0 40px;
    }

0 回复有任何疑惑可以回复我~

收起回答

暮女神提问者

你没弄懂我的意思,我是说让提示文字居中,点击后光标居左,提示文字还是居中

2017-07-03 回复有任何疑惑可以回复我~

0/150

提交

取消

CSS Sprite雪碧图应用

参与学习 47102 人
解答问题 228 个

必学的大型网站实用技术，让你快速掌握CSS Sprite雪碧图技术

进入课程

本课相似问答

6 回答placeholder居中问题

1 回答h3怎么没有居中呢

3 回答怎样让文字居中显示

6 回答这题里面文字居中怎么设置？能用margin 0 auto吗？

1 回答文字居中对h3设置margin 0 auto没效果

搜索更多本课相关问答

使用placeholder内容居中光标也居中了

我要回答关注问题

热搜

最近搜索清空

使用placeholder内容居中光标也居中了

3 回答

本课相似问答

使用placeholder内容居中光标也居中了