Textarea 和 Select 的 CSS 样式 - 不适用于之前的说明

Question

Textarea 和 Select 的 CSS 样式 - 不适用于之前的说明

G-U*_*nit 1 html css

我正在尝试使用自定义 CSS 表来增加font-size我的input和字段中的。textarea

更改字段font-size的input效果很好，但textarea只是不允许我调整它的大小font-size。

我还包含了 bootstrap，所以我想知道我的 CSS 表是否会被bootstrap.css. 但我在引导链接之后添加了 CSS 链接，head并将样式放在texareaCSS 的最后，所以它应该是最后一个被读取的链接。

div另外我想也许我在、form等中调用的所有引导类都textarea改变了font-size，所以我尝试了元素和textarea的外部，但大小没有改变。divform

https://jsfiddle.net/2nko48bL/1/

看看现在的表格是什么样子的：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
</head>
<body>

<!-- THE IMPORTANT FORM: -->
<form >
    <!-- INPUT WITHOUT BOOTSTRAP CLASSES -> Increasing the font works fine-->
    <div>
      <label>Title</label>
      <input type="text"/>
    </div>
    <!-- TEXTAREA WITHOUT BOOTSTRAP CLASSES -> Increasing the font doesn't work -->
    <div>
      <label >Longer Description</label>
      <textarea></textarea>
    </div>
    <!-- TEXTAREA WITH BOOTSTRAP CLASSES -> Increasing the font doesn't work -->
    <div class="form-group row">
      <label for="longerDescription" class="control-label col-sm-4">Longer Description</label>
      <div class="col">
        <textarea id="longerDescription" class="form-control" th:field="*{description}" required="required"></textarea>
      </div>
    </div>
    <!-- INPUT WITH BOOTSTRAP CLASSES -> Increasing the font works fine again -->
    <div class="form-group row">
      <label for="contact" class="control-label col-sm-4">Contact</label>
      <div class="col">
        <input type="text" id="contact" class="form-control" th:field="*{contact}" required="required"/>
      </div>
    </div>

</form>
<!-- TEXTAREA COMPLETELY OUTSIDE DIV AND FORM -> Increasing the font doesn't work -->
<label >Longer Description</label>
<textarea></textarea>

</body>
</html> 

input[type=text] {
  height: 100px;
  font-size: 200%;
  box-sizing: border-box;
}

textarea {
  height: 100px;
  font-size: 300%;
  box-sizing: border-box;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

我已经做了

textarea 
{
  font-size: 200% !important;
}

Run Code Online (Sandbox Code Playgroud)

效果很好。bootstrap.form-control{font-size: 1rem}覆盖了你的 css。添加!important有效。

PS：如果您认为其他一些库可能会覆盖您的CSS。尝试检查并在样式中查找外部库应用于元素的属性。

归档时间：	5 年，10 月前
查看次数：	279 次
最近记录：	5 年，10 月前