首页 > 软件开发 > 编程语言 >

如何利用不同形式的样式设置input输入框字体

来源:互联网 2023-03-17 00:16:27 版权归原作者所有,如有侵权,请联系我们

在做项目时,我发现利用外联样式文件对input输入框内容字体设置样式,发现不起作用。为了验证到底怎样设置样式才能控制input输入框内字体大小等属性,利用一个实例解析说明,操作如下:1rc办公区 - 实用经验教程分享!

如何利用不同形式的样式设置input输入框字体1rc办公区 - 实用经验教程分享!

工具/原料

  • HBuilder
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    第一步,打开H HBuilder编辑器,新建静态页面input.html,默认为HTML5模版,如下图所示:1rc办公区 - 实用经验教程分享!

    如何利用不同形式的样式设置input输入框字体1rc办公区 - 实用经验教程分享!

  • 2

    第二步,在css文件夹下新建样式文件input.css,并编写控制input输入框样式,如下图所示:1rc办公区 - 实用经验教程分享!

    如何利用不同形式的样式设置input输入框字体1rc办公区 - 实用经验教程分享!

  • 3

    第三步,在页面input.html中引入input.css样式文件,并在body元素内插入input输入框,在浏览器查看效果,如下图所示:1rc办公区 - 实用经验教程分享!

    如何利用不同形式的样式设置input输入框字体1rc办公区 - 实用经验教程分享!

  • 4

    第四步,将样式文件中的样式复制到页面中,直接利用style>/style>标签包裹,如下图所示:1rc办公区 - 实用经验教程分享!

    如何利用不同形式的样式设置input输入框字体1rc办公区 - 实用经验教程分享!

  • 5

    第五步,将样式直接放到input标签元素内,利用内嵌式样式,控制输入框字体属性,如下图所示:1rc办公区 - 实用经验教程分享!

    如何利用不同形式的样式设置input输入框字体1rc办公区 - 实用经验教程分享!

  • 6

    第六步,在浏览器查看三种样式控制输入框字体属性,结果发现效果是一样的,说明项目中的input输入框是由其他样式干扰,导致样式不能起到作用,如下图所示:1rc办公区 - 实用经验教程分享!

    如何利用不同形式的样式设置input输入框字体1rc办公区 - 实用经验教程分享!

  • 6本页面未经许可获取自百度经验
  • 注意事项

    • 注意input输入框字体大小和粗细控制
    • 注意样式兼容性

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!1rc办公区 - 实用经验教程分享!


    标签: 编程语言

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号