边框半径为零，当使用伪元素之后。

huangapple
go评论102阅读模式
英文:

border radius is zero when use after psoudo element

问题

  1. <input required type="number" class="form-control"><span></span>
英文:

i user bootstrap form , i want to insert * after any input (in invalid input with red color and in valid input with green color)<br>
i have to use &lt;span&gt; tag after any input to show *<br>
but when i use &lt;span&gt; and ::after pseudo element input border radius is 0 but i want to no change border radius .

  1. input:invalid+span::after {
  2.   content: &quot;*&quot;;
  3.   font-size: large;
  4.   color: red;
  5. }
  7. input:valid+span::after {
  8.   content: &quot;*&quot;;
  9.   font-size: large;
  10. }
  15.    &lt;div class=&quot;col-md-6 col-lg-4&quot;&gt;
  16.        &lt;div class=&quot;input-group mb-2&quot;&gt;
  17.             &lt;span class=&quot;input-group-text&quot;&gt;
  18.                 &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
  19.             &lt;/span&gt;
  20.             &lt;input required type=&quot;number&quot; class=&quot;form-control&quot;&gt;&lt;span&gt;&lt;/span&gt;
  21.        &lt;/div&gt;
  22.    &lt;/div&gt;

MyCode:
CodeLink

答案1

得分: 0

按照这些样式，它可以工作：

  1. input:invalid+span::after {
  2.   content: "*";
  3.   font-size: large;
  4.   color: red;
  5. }
  7. input:valid+span::after {
  8.   content: "*";
  9.   font-size: large;
  10.   color: green;
  11. }
  13. .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  14.   border-top-left-radius: 6px;
  15.   border-bottom-left-radius: 6px;
  16. }
英文:

by this styles it worked

  1. input:invalid+span::after {
  2.   content: &quot;*&quot;;
  3.   font-size: large;
  4.   color: red;
  5. }
  7. input:valid+span::after {
  8.   content: &quot;*&quot;;
  9.   font-size: large;
  10.   color: green;
  11. }
  14. .input-group:not(.has-validation)&gt;:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  15.   border-top-left-radius: 6px;
  16.   border-bottom-left-radius: 6px;
  17. }

huangapple
  • 本文由 发表于 2023年6月27日 21:24:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/76565355.html
  • class
  • css
  • html
  • validation
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定