个人中心
gpt4 book ai didi

CSS for after content(用于后续内容的CSS)

转载 作者：bug小助手 更新时间：2023-10-28 09:23:56 26 4
gpt4 key购买 nike



I created a user input field which is mandatory to fill. As a part of this, I wanted to add a star (as it is a common practice) to let the user know that the field is required to be filled. I used the shadow command to add the star. However, the stars do not align with the text as I believe there is no reference point for them. I am attaching part of the HTML and CSS below. I do not understand how to provide them with a reference point without disturbing my existing structure. Also, is the use of shadow element is how it is usually done?

我创建了一个必须填写的用户输入字段。作为其中的一部分，我想添加一个星号(因为这是一种常见的做法)，以让用户知道该字段需要填写。我使用阴影命令添加了星星。然而，星星并不与文本对齐，因为我认为它们没有参考点。我附上了下面的HTML和CSS的一部分。我不明白如何在不扰乱我现有结构的情况下为他们提供一个参考点。另外，影子元素的使用是不是通常是这样做的呢？




.feedback-data form {
  position: relative;
  top: 12rem;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
}

.name-form {
  display: flex;
  gap: 1rem;
}

.name-form .data-form {
  flex: 1;
}

.data-form {
  display: flex;
  flex-flow: column-reverse nowrap;
  gap: 1.5rem;
}


.required::before {
  position: absolute;
  content: '*'; 
  color: red;
  margin-right: 4px; 
}

<div class="feedback-data">
  <form action="" method="post">
    <div class="name-form">
      <div class="data-form  required">
        <input type="text" id="firstName" required>
        <label for="firstName">First Name</label>
      </div>
      <div class="data-form required">
        <input type="text" id="lastName" required>
        <label for="lastName">Last Name</label>
      </div>
    </div>
  </form>
</div>




更多回答

Welcome! The term you're looking for is pseudo element (not shadow). You can put that on the label instead of the wrapper element: .required label::after {...}. You can also remove position: absolute if you do it that way. If you want it on the wrapper, just add position: relative to .data-form. Some good reading about positioning and parent elements - and you don't need to use a pseudo element if you control the markup of the form, just put a <span>*</span> in the label element

欢迎光临！您要查找的术语是伪元素（不是阴影）。你可以把它放在标签上，而不是包装器元素：.required label：：after {...}。你也可以删除position：absolute，如果你这样做的话。如果你想把它放在包装器上，只需要添加position：relative to .data-form。一些关于定位和父元素的好读物--如果你控制表单的标记，你不需要使用伪元素，只需要在标签元素中放一个 *

优秀答案推荐

Heres two samples you can play with. I am not sure if this is what you mean. Basically just put a negative margin on the star on the first examble and usually i put it after the label when I am indicating required. Let me know if this helps

这里有两个样品，你可以玩。我不确定这是否是你的意思。基本上只是把一个负利润率的明星对第一个例子，通常我把它后的标签时，我指出需要。如果有帮助就告诉我




.feedback-data form {
  position: relative;
  top: 12rem;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
}

.name-form {
  display: flex;
  gap: 1rem;
}

.name-form .data-form {
  flex: 1;
}

.data-form {
  display: flex;
  flex-flow: column-reverse nowrap;
  gap: 1.5rem;
}


.required::before {
  position: absolute;
  content: '*'; 
  color: red;
  margin-left: -10px;
}


/** star by the label **/

label.star::after {
  position: absolute;
  content: '*'; 
  color: red;
  
}

<div class="feedback-data">
  <form action="" method="post">
  <h2>SAMPLE 1 is with -margin</h2>
    <div class="name-form">
      <div class="data-form  required">
        <input type="text" id="firstName" required>
        <label for="firstName">First Name</label>
      </div>
      <div class="data-form required">
        <input type="text" id="lastName" required>
        <label for="lastName">Last Name</label>
      </div>
    </div>
  </form>
</div>

<br>
<br>
<br>



<div class="feedback-data">
  <form action="" method="post">
  <h2>SAMPLE 2 by the label</h2>
    <div class="name-form">
      <div class="data-form  required">
        <input type="text" id="firstName" required>
        <label class="star" for="firstName">First Name</label>
      </div>
      <div class="data-form required">
        <input type="text" id="lastName" required>
        <label class="star" for="lastName">Last Name</label>
      </div>
    </div>
  </form>
</div>




更多回答

Hey, thanks for the answer. The reason why I can't use your answer is because you have used a label as the selection. This will cause all the labels to have a star. However, I also have fields that are not necessary to fill. That was the reason why I have created the 'required' class

嘿，谢谢你的回答。我不能使用您的答案的原因是因为您使用了标签作为选项。这将导致所有标签都有一个星号。但是，我也有一些不需要填写的字段。这就是我创建‘Required’类的原因

@ThorThedog as you can see it was specified on the label to have a class star on it so it doesnt affect everything else.

@ThorThedog，正如你所看到的，它在标签上被指定为有一个类星，所以它不会影响其他一切。

26 4 0
文章推荐： How to Use Overleaf along with Zotero when using IEEE Access Template(如何在使用IEEE Access模板时同时使用下页和Zotero)
文章推荐： github uses adds old asset files when creating new release(github在创建新版本时使用添加旧资产文件)
文章推荐： How does one operator pass on event stream to another operator?(一个操作符如何将事件流传递给另一个操作符？)
文章推荐： HTML Button Close Window(超文本标记语言按钮关闭窗口)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com