message文本框的输入文本问题

message文本框的输入文本问题

http://img1.sycdn.imooc.com//climg/5a4db93500018ddc10040468.jpg如图,想请教下设置什么属性可以使message文本框的输入文本从第一行开始,我设置的text-align: left;只能像图片那样从左边居中开始

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

使用的应该是input的标签吧,type="text" 只是单行显示,如多行显示,建议使用<textarea>文本区域标签。

  • winterly 提问者 #1
    是的,用的input标签,刚试了下textare标签,确实可行,非常感谢,不过用了之后里面的placeholder内容也显示在开始,可以设置成像3-2作业里的示例图一样placeholder在左边中间显示,然后点击后文本从第一行开始吗?
    2018-01-04 16:53:05
  • 小于飞飞 回复 提问者 winterly #2
    作业代码中,因为在 * 中设置了text-align: center; 可以去掉或者单独设置text-align: left; 试一试。
    2018-01-04 17:24:29
小于飞飞 2018-01-04 18:16:39

可以使用下面方法实现提示文字居中:

.message::-webkit-input-placeholder{
     height: 275px; line-height: 275px
    }    /* 使用webkit内核的浏览器 */
 .message:-moz-placeholder{
      height: 275px;line-height: 275px
    }                  /* Firefox版本4-18 */
.message::-moz-placeholder{
      height: 275px;line-height: 275px
    }                  /* Firefox版本19+ */
.message:-ms-input-placeholder{
      height: 275px;line-height: 275px
    }

动手实践下,加油!

  • 提问者 winterly #1
    试了一下可以,厉害了,忘了可以直接对属性进行控制了,哈哈,谢谢老师!
    2018-01-05 13:19:13
  • 小于飞飞 回复 提问者 winterly #2
    加油,加油。
    2018-01-05 14:10:53
提问者 winterly 2018-01-04 17:50:39

我改成这样<textarea class="message" placeholder="Message"></textarea>

CSS是这样写的textarea.message { clear: both;width: 960px;height: 275px;margin-bottom: 26px;text-align: left;border: 1px solid #eee; }

然后是像下图这样

http://img1.sycdn.imooc.com//climg/5a4df8c100018f0608760271.jpg

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师