Question

以下屏幕截图显示了用于在右侧生成textarea输入框（带有占位符文本：“您对世界的评论”）的forms.py代码。

但是，该CSS仅应用于纯HTML textarea框（左侧），我无法弄清楚如何将其应用于Django生成的textarea输入框。您会注意到，CSS已自动应用于顶部的“名称”文本输入字段。

styles.css代码在此处：

body {
  background-color: white;
}
h1 {
  color: red;
  text-shadow: 3px 2px grey;
  font-family: Arial
}
p {
  color: black;
  font-family: Arial
}


input[type=text] {
  width: 20%;
  padding: 21px 20px;
  margin: 14px 0;
  box-sizing: border-box;
  font-size: 33;
  border: 2px solid red;
  border-radius: 4px;
  font-family: Arial
}

textarea[type=textarea] {
  width: 20%;
  padding: 21px 20px;
  margin: 14px 0;
  box-sizing: border-box;
  font-size: 33;
  border: 2px solid red;
  border-radius: 4px;
  font-family: Arial
}

forms.py（如上图所示，带有HTML呈现）位于下面

from django import forms

class CommentForm(forms.Form):
    name = forms.CharField(max_length=20,widget=forms.TextInput(attrs={'placeholder':'Your Name Please'}))
    comment = forms.CharField(widget=forms.Textarea(attrs={'placeholder':'Your comment to the world'}))

最后， sign.html页面（带有相关页面的HTML）在下面

{% load static %}
<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="{% static 'guestbook/styles.css' %}">
</head>
<body>

<h1>Tell the world how you're doing!</h1>
<h2>Sign the guestbook</h2>
<form action="/action_page.php">
  Enter your name:<br>
  <!--<input type="text" name="name" placeholder="Your Name here">-->
   {{form.name}}
  <br>
 Enter your comment:<br>
  <textarea name="message" type="Textarea" placeholder="Your comment here" rows="10" cols="30"></textarea>
  {{form.comment}}
  <br><br>

  <input type="button" value="Submit">

</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<p>Go to the <a href="{% url 'index' %}"> guestbook </a> itself</p>
</body>
</html>

从本质上讲，我想知道如何简单地创建一个HTML对象（具有功能性）并将CSS应用到该对象。

Answer 1

因此，如果我正确理解了这个问题，那么将CSS应用于您的硬编码HTML就没有问题，而Django的模板系统生成的HTML却使CSS难以坚持？我将检查django生成的“ comment”字段的呈现HTML。我想您会发现您的CSS规则没有应用，因为HTML并非您所期望的。换句话说，您的选择器textarea[type=textarea]与注释字段不匹配，因为它可能不是文本区域，或者没有type = textarea属性。

如果您难以使CSS规则生效，则可以在小部件定义本身中添加属性，但是我经常使用This库。让我们在模板中添加属性。

将CSS应用于Django生成的textarea表单对象

1 个答案: