CSS-表单字段中的颜色

我是一个新手，但很擅长CSS，但我似乎无法做到以下几点：

是盒子和背景让我困惑。其余的我都很好。任何指针都会非常有用。我知道bootstrap有一个类似的插件，但我发现使用bootstrap是一个噩梦

我已经厌倦了无数可笑的事情，我不好意思表现出来，以为是时候我去问亲了

  input[type=text]{
  background-color: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
  color: black;
  }

  input[type=text]{
  background-color: red;
  color: aqua;
  background-size: 20%;
 }

HTML

---

这是我已经厌倦的最后两件可笑的事情

这就是我应该如何用更少的代码来解决它，正如评论所建议的： 不要评估设计

.输入字段{ /*还有边界等等*/ 背景色：f00； 框大小：边框框； 左：2米； 位置：相对位置； } .输入字段：前{ 内容：X；/*如果图标来自字体，请使用此选项， 或者使用空格重新调整其间距，然后使用“背景图像”属性*/ 位置：绝对位置； 左：0； 宽度：2em；/*仅用于将填充物居中*/ 文本对齐：居中； 字体大小：1em；/*表示可扩展性*/ } .输入字段>输入{ 宽度：100%； 字号：1em； } /*这只是为了玩，为了测试可伸缩性*/ .填行{ 宽度：100%； } .大{ 字号：2em； } .短{ 最大宽度：160px； }

---

这是我通常使用的一种方法。 纯CSS和语义：

HTML

实例

---

请发布一些您所使用的代码。向我们展示你的作品，告诉我们你到目前为止的尝试，css/html代码…@IvanStefanov我已经添加了代码，尽管它是pettyful@jerneva-检查我下面的答案，我认为它适合您轻松实现的目标，如果您需要更改图标而不需要编辑HTML，则while是非常灵活的：我认为标签可能比字段集更好。@Paulie_D我不喜欢用标签包装输入。我只见过人们用定制的复选框来尝试。但包装器元素可以是任何东西：我会尽量避免使用span元素作为图标。您可以用更少的代码获得相同的效果，并且更少地依赖于对HTMLI所做的任何更改。我不会尝试在HTML中创建最小的代码，即使引导程序使用span作为图标，但如您所愿：

 <div id="section_left">
    <form id="franchiseDets" action ="Franchise-Details.php" method="POST">


        <!--                franchise details form-->
        <div class="field">

            <input type="text" name="fran_name" id="fran_name" value="<?php echo $_SESSION['fran_name']; ?>"  placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" 
                   autofocus required tabindex="1">
            <br>

            <input type="email" name="fran_email" id="fran_email" value="<?php echo $_SESSION['fran_email'] ?> ' <?php echo $disabled ?>" placeholder="leeds@one-delivery.co.uk" required tabindex="2">
            <br>

            <input type="text" name="mang_name" id="mang_name" value="<?php echo $_SESSION['mang_name']; ?>" placeholder="Joe Blogs" required tabindex="3">
            <br>

<fieldset class="example">
  <input type="text" placeholder="Phone" />
</fieldset>

fieldset.example {
  position: relative;
}

fieldset.example,
fieldset.example:before,
fieldset.example input {
  height: 33px;
  padding: 0;
  border-width: 0;
  /* remove default border */
}
fieldset.example input {
  border: 1px solid red;
  border-left: 0px;
  padding-left: 5px;
  border-radius: 0 5px 5px 0;
}
fieldset.example:before {
  content: "\0260E";
  width: 30px;
  border: 1px solid red;
  display: inline-block;
  float: left;
  position: relative;
  background: red;
  color: white;
  text-align: center;
  line-height: 33px;
  border-radius: 5px 0 0 5px;
}