无涯教程网

Css 为什么和 <textfield> 不从正文中获取字体系列和字体大小</a></h1> </div> <div class="entry-info" style="padding: 4px 0 0 0;"> <time class="entry-date published"> 发布于05月20日 </time> </div> <div class="intro mb20"> <p>为什么<code>Textarea</code>和<code>textfield</code>不能从身体里取出<code>font-family</code>和<code>font-size</code>呢？</p> <p>请看此处的现场示例<a href="http://jsbin.com/ucano4" rel="noreferrer">http://jsbin.com/ucano4</a></p> <p>代码</p> <pre><code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>texearea font</title> <style type="text/css"> body { font-family: Verdana, Geneva, sans-serif; font-size:16px } </style> </head> <body> <form action="" method="get"> <textarea name="" cols="20" rows="4"></textarea> <input name="" type="text" /> </form> <p>some text here</p> </body> </html> </code></pre> <p>如果这是一种常见的行为，那么我应该像这样用CSS编写吗？我需要所有的款式都一样.</p> <pre><code>body,textarea,input { font-family: Verdana, Geneva, sans-serif; font-size:16px } </code></pre> <p>XHTML中还有多少其他元素不会采用<code>body {....}</code>的字体样式？</p> </div> </div> </div> <div class="q-single mt20"> <div class="intro mb20"> <div class="layui-card"> <div class="layui-card-header"><h2>推荐答案</h2></div> <div class="layui-card-body"> <p>默认情况下，浏览器使用操作系统控件或浏览器控件呈现大多数表单元素(文本框、文本框、按钮等).因此，大多数字体属性都取自操作系统当前使用的主题.</p> <p>如果您想更改表单元素的字体/文本样式，就必须针对表单元素本身——不过，正如您刚才所做的那样， Select 表单元素应该很容易.</p> <p>据我所知，只有形式元素受到影响.在我的脑海里:<code>input</code><code>button</code><code>textarea</code><code>select</code>.</p> </div> <div class="layui-card-footer"> <span id="share"></span> </div> </div> </div> </div> <div class="entry-content mt20"> <h2 class="tip_title">Css相关问答推荐</h2> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/78297700.html" title="我控制的自定义单选按钮无法重新 Select ">我控制的自定义单选按钮无法重新 Select </a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/78187593.html" title="通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出">通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/77897821.html" title="将CSS更改为Mat-Form-Field，其中包含搜索框">将CSS更改为Mat-Form-Field，其中包含搜索框</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/77887782.html" title="如何在CSS中平滑线性平移动画">如何在CSS中平滑线性平移动画</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/77249398.html" title="如何使TWebPanel具有圆角？">如何使TWebPanel具有圆角？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/77038944.html" title="如何使背景出现在具有自己背景 colored颜色的子元素上">如何使背景出现在具有自己背景 colored颜色的子元素上</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/76053703.html" title="使用框架时样式冲突导致的 CSS 网格布局问题">使用框架时样式冲突导致的 CSS 网格布局问题</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/75482687.html" title="如何增加 PrimeFlex 网格的间隙？">如何增加 PrimeFlex 网格的间隙？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/74966612.html" title="css ：：part 伪 Select 器 Chrome 兼容性？">css ：：part 伪 Select 器 Chrome 兼容性？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/74881964.html" title="努力将 CSS 样式应用于 Elm 应用程序">努力将 CSS 样式应用于 Elm 应用程序</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/72292478.html" title="JavaFX TreeTableView Css for unfocused selected line">JavaFX TreeTableView Css for unfocused selected line</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/71760177.html" title="用 svelte 设计 body 元素">用 svelte 设计 body 元素</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/7777159.html" title="使用 CSS 剪辑/裁剪背景图像">使用 CSS 剪辑/裁剪背景图像</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/11875088.html" title="在 css 中使用 FontAwesome 或 Glyphicons ：before">在 css 中使用 FontAwesome 或 Glyphicons ：before</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/6195329.html" title="如何隐藏 Chrome 中 HTML5 <details> 元素上默认显示的箭头？">如何隐藏 Chrome 中 HTML5 <details> 元素上默认显示的箭头？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/24697267.html" title="Flexbox 列自底对齐">Flexbox 列自底对齐</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/46313640.html" title="iPhone X / 8 / 8 Plus CSS 媒体查询">iPhone X / 8 / 8 Plus CSS 媒体查询</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/6593425.html" title="跨浏览器方法使子 div 适合其父级的宽度">跨浏览器方法使子 div 适合其父级的宽度</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/12592473.html" title="谷歌浏览器两种元素样式的区别">谷歌浏览器两种元素样式的区别</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/css/13211453.html" title="CSS：怎么说 .class：last-of-type [类，不是元素！]">CSS：怎么说 .class：last-of-type [类，不是元素！]</a></h3> <div class="clear"></div> </div> </div> <div class="layui-col-xs12 layui-col-md3 pl20 mt20"> <div class="layui-card"> <div class="layui-card-header">实用课程推荐</div> <div class="layui-card-body"> <ul class="geek-ul"> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="http://gk.link/a/106W0" rel="nofollow" title="">Service Mesh实践指南 -〔周晶〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/course/intro/100028901?code=1Xx5eUlsbw4wv%2FjoWxgvjSh3UpRIU88UQ2TQs-NzYko%3D" rel="nofollow" title="">玩转webpack -〔程柳锋〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100034501?code=M19bur8mt5KrVk3YE5sZTcgswTrfOMBkeXm1H5nNbxo%3D" rel="nofollow" title="">研发效率破局之道 -〔葛俊〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100050201?code=p4NFLdsNGiW9KIhSLCihrGi24DwesqpegA1J4ijjvOk%3D" rel="nofollow" title="">Serverless入门课 -〔蒲松洋（秦粤）〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100060801?code=s4dC14nV-Fzlm%2FWIIUoIca69bDvxS0mkcAH9Jh2qv00%3D" rel="nofollow" title="">深度学习推荐系统实战 -〔王喆〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100099801?code=9muU7veSY90nAEp42Co8zEzusw5OHk51Ou9hTOYQN4M%3D" rel="nofollow" title="">郭东白的架构课 -〔郭东白〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100109201?code=JOObip%2Ft-d4cQ7IOP1ORYDQ0dWqRM2a3E9rtmKxpZ2g%3D" rel="nofollow" title="">自动化测试高手课 -〔柳胜〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100524201?code=LLLdxcb6DWWCtVwMRz2fTtetfQWQltGuhVsD6LEOHnk%3D" rel="nofollow" title="">快速上手C++数据结构与算法 -〔王健伟〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100555001?code=OkN2a2AqY%2FSgpJ1QSb-OQxMx98YMbCy4mEO81Vm7Oh8%3D" rel="nofollow" title="">AI绘画核心技术与实战 -〔南柯〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/course/intro/100611001?code=xfZXR1C9rNxF4rX-IYxz3%2FGjuY8ogR6E9j%2FijO8P7eM%3D" rel="nofollow" title="">结构写作力 -〔李忠秋〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100637501?code=66jS8RDILS08n7zRzhXKJIzQYlHsSdYizlW5XoK-jLo%3D" rel="nofollow" title="">程序员职业规划手册 -〔雪梅〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100755401?code=VpX3KETG4eNGJI-l8U6tClmHd%2FhVd%2FjSonK73cZuxK8%3D" rel="nofollow" title="">徐昊 · AI 时代的软件工程 -〔徐昊〕</a></p> </li> </ul> </div> </div> <div class="layui-card"> <div class="layui-card-header">相关教程推荐</div> <div class="layui-card-body"> <ul class="geek-ul"> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/matplotlib/matplotlib-tutorial.html" title="Matplotlib">无涯教程 - Matplotlib教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/python-web-scraping/python-web-scraping-tutorial.html" title="Python Web Scraping">无涯教程 - Python Web Scraping教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/haskell/haskell-tutorial.html" title="Haskell">无涯教程 - Haskell教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/matlab/matlab-tutorial.html" title="MATLAB">无涯教程 - MATLAB教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/socket.io/socket.io-tutorial.html" title="Socket.io">无涯教程 - Socket.io教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/wordpress/wordpress-tutorial-intro.html" title="WordPress">无涯教程 - WordPress教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/computer/computer-tutorial-intro.html" title="计算机基础">无涯教程 - 计算机基础教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/python-prog/python-prog-tutorial-intro.html" title="Python 物联网编程">无涯教程 - Python 物联网编程教程</a></p> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="layui-footer footer footer-doc"> <div class="layui-main"> <div style="margin: 10px 0;text-align: center;" class="frient-link"> <a href="https://www.xiuxiandou.com" target="_blank"><span>休闲君评测</span></a> | <a href="https://www.toolfk.com" title="Programmer's toolbox" target="_blank">TOOLFK工具网</a> | <a href="https://www.chromefk.com" title="Chrome插件网" target="_blank">chrome插件网</a> | <a href="https://www.poemfk.com" title="古文传承网" target="_blank">古诗文网</a> | <a href="https://www.lxlinux.net" title="良许Linux教程网" target="_blank">良许Linux教程网</a> | <a href="https://foofish.net" title="Python之禅" target="_blank">Python之禅</a> | <a href="https://redstonewill.com" title="红色石头" target="_blank">红色石头</a> | <a href="https://www.haomenke.com" target="_blank"><span>豪评测</span></a> | <a href="https://www.rudangla.com" title="入党申请书" target="_blank">入党申请书</a> | </div> <p> © 2020 <a href="https://www.learnfk.com/" title="无涯教程">Hi LearnFk</a> <a href="https://support.qq.com/products/163835" target="_blank" rel="nofollow">意见反馈</a> <a href="/disclaimer.html" title="免责声明" rel="nofollow">免责声明</a> <a href="/aboutus.html" title="关于我们" rel="nofollow">关于我们</a> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">桂ICP备11002319号-3</a> <span class="pl20"> 友链&广告位+QQ: 1963612630 </span> </p> </div> </div> <script src="/guide/js/layer/layer.js" charset="utf-8" ></script> <script> IS_ARTICLE = false; SHOW_JUMP = false; IS_SIGN = ""; </script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&lang=css" async></script> <script src="/guide/js/article.min.js?v4=1" async charset="utf-8"></script> <script src="/guide/js/clipboard.min.js" async charset="utf-8"></script> <ul class="layui-fixbar"> <li class="layui-icon layui-icon-transfer change-theme" lay-type="bar1" title="切换模式"></li> <li class="layui-icon layui-icon-print" lay-type="bar1" title="打印"></li> <li class="layui-icon layui-icon-login-wechat login-wechat" lay-type="bar1" title="关注我们"></li> <li class="layui-icon layui-fixbar-top layui-icon-top" lay-type="top" title="Top"></li> </ul> <script type="text/javascript"> $(function(){ $("body").delegate(".login-wechat","click",function(e){ e.stopPropagation(); var offset = "100px"; layer.open({ content: '<img src="/common/learnfk.jpg?v=2" width="220px;">', scrollbar: false, title:"关注我们", offset:offset }); }); $("a").click(function(){ if($(this).hasClass("demo-copy")){ return; } if($(this).hasClass("noload")){ return; } layer.load(); setTimeout(function(){ layer.closeAll(); },3000); }); $("pre").map(function(item){ if(!$(this).hasClass("prettyprint")){ $(this).addClass("prettyprint"); $(this).before('<div class="demo-view"><a href="javascript:;" class="demo-copy" title="Copy Code">复制代码</a></div>'); } }); $("body").delegate(".demo-view a.demo-copy", "click", function () { var that = $(this); var tran_text = that.parent(".demo-view").next(".prettyprint").text(); new ClipboardJS("a.demo-copy", { text: function (trigger) { layer.msg("复制成功"); return tran_text; } }); }); }); </script> <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5fab445f7efc200012ec7197&product=sop' async='async' defer></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234706520155299" crossorigin="anonymous"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-31321715-15"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-31321715-15'); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fbe07850803babb5bcec215bbd0dc6a4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?44422bbce4f642f723e6931a2fce9d632bd6aa77580fe4aad81efd527b26ed8a30632485602430134f60bc55ca391050b680e2741bf7233a8f1da9902314a3fa"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> </body> </html>