Question

我正在尝试从联系表单的输入文本字段中删除边框。

基本上，每当我在输入文本字段（名称字段）中输入任何数据然后转到下一个电子邮件字段时，输入文本字段排序就会有一个边框，可能看不到某种类型

我尽力使用CSS来使其工作，但不知何故它不起作用。

HTML

<section id="contact">
    <div class="container">
      <h3 class="contact-section-title">Need advice?</h3>
      <p class="contact-section-sub-title-form">Drop me an email below.</p
      <div class="grid-row col-2">
        <div class="grid-unit3">
          <form name="form1" method="post" action="contact.php" >
            <input name="cf_name" placeholder="What is your name? (Eg: John Doe)" type="text" required />
            <input name="cf_email" placeholder="What is your email? (Eg: johndoe@johndoe.com)" type="email" required />
            <textarea rows="4" cols="50" name="cf_message" placeholder="Please enter your message" class="message" required></textarea>
            <button class="submit" type="submit">Send email</button>
            <br><Br><br><Br>
          </form>
        </div><!--class="email" type="email"-->
      </div>
    </div>
  </section>

JSFiddle

希望得到一些有力的帮助。不知道从哪里去。

谢谢。

Answer 1

我所做的更改 - ＆gt;

border:0px solid #58B9FA;

第105行。

Answer 2

原因是您向所有border:1px solid #58B9FA;元素添加了input。通过替换为：

来修复它

input {
    border: 0
}

<强> Updated Fiddle

Answer 3

从以下

更改了css中的border属性

input {
            color: #3498db;
            display: block;
            font-family: Lato-Regular, sans-serif;
            font-size: 17px;
            margin-bottom: 0.8em;
            padding-bottom: 1em;
            padding-left: 1em;
            padding-right: 1em;
            padding-top: 1em;
            width: 100%;
            border:1px solid #58B9FA; }

到

input {
        color: #3498db;
        display: block;
        font-family: Lato-Regular, sans-serif;
        font-size: 17px;
        margin-bottom: 0.8em;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
        width: 100%;
        border:0px solid #58B9FA; }

Answer 4

在border: none; css

中设置border:0或input

FIDDLE

从输入文本字段中删除奇怪的边框

4 个答案: