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

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

border radius is zero when use after psoudo element

问题

<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 .

input:invalid+span::after {
  content: &quot;*&quot;;
  font-size: large;
  color: red;
}

input:valid+span::after {
  content: &quot;*&quot;;
  font-size: large;
}




   &lt;div class=&quot;col-md-6 col-lg-4&quot;&gt;
       &lt;div class=&quot;input-group mb-2&quot;&gt;
            &lt;span class=&quot;input-group-text&quot;&gt;
                &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
            &lt;/span&gt;
            &lt;input required type=&quot;number&quot; class=&quot;form-control&quot;&gt;&lt;span&gt;&lt;/span&gt;
       &lt;/div&gt;
   &lt;/div&gt;

MyCode:
CodeLink

答案1

得分: 0

按照这些样式,它可以工作:

input:invalid+span::after {
  content: "*";
  font-size: large;
  color: red;
}

input:valid+span::after {
  content: "*";
  font-size: large;
  color: green;
}

.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
英文:

by this styles it worked

input:invalid+span::after {
  content: &quot;*&quot;;
  font-size: large;
  color: red;
}

input:valid+span::after {
  content: &quot;*&quot;;
  font-size: large;
  color: green;
}


.input-group:not(.has-validation)&gt;:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

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

发表评论

匿名网友

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

确定