Get rid of strange border from the input text field

I'm struggling to remove a border from an input text field on my contact form.

Whenever I enter data into the Name field and then move on to the email field, there seems to be an invisible border around the input text field.

I've tried tweaking the CSS but haven't been successful in getting rid of it.

HTML

<section id="contact">
    <div class="container">
      <h3 class="contact-section-title">Need advice?</h3>
      <p class="contact-section-sub-title-form">Feel free to send 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="Enter your name (e.g. John Doe)" type="text" required />
            <input name="cf_email" placeholder="Enter your email (e.g. example@domain.com)" type="email" required />
            <textarea rows="4" cols="50" name="cf_message" placeholder="Please type your message here" 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>

View JSFiddle

I could really use some help with this issue. Not sure where to turn next.

Thank you.

Answer №1

Edits I implemented ->

border:0px solid #58B9FA; 

at line 105.

Answer №2

The issue arises from the addition of border:1px solid #58B9FA; to every input element. To resolve this, simply replace it with:

input {
    border: 0;
} 

View Updated Fiddle

Answer №3

Modified the border attribute in CSS as shown below

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; }

to

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

try adding border: none; or border:0 in the css of your input element

JSBIN

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

I am inquiring because I recently completed a beautiful homepage design and, after viewing the website on Chrome and Safari on OSX, I noticed that certain elements were broken when I opened it in Firefox. In addition, an issue I was experiencing with the ...

Having trouble applying CSS to multiple classes used in an AJAX call

I'm trying to utilize richfaces for some fast AJAX widgets, but I am encountering difficulties in setting CSS parameters for them. After inspecting the generated code, I found that the elements have the classes "rf-ds" and "rpds". Despite applying st ...

What is the best way to determine the width of a device, rather than just the

I'm currently working on my debut website and I’ve encountered a minor setback with the meta tag. It seems to be defining a fixed width instead of adapting to the device screen, which is hindering my CSS animation endeavors. Most of the design displ ...

Custom pagination page size in AngularJS trNgGrid

I have been working on developing an Angular table using trNgGrid. It's functioning fine, but I am looking to incorporate custom pagination where the user can choose the number of page items to display per page. I checked out the TrNgGrid Global Opti ...

Arrange the image in a way that flows smoothly with the text

I want to achieve the effect of having a picture of a Pen positioned behind the text "Create" on the left side. It looks good at full size, but the positioning gets messed up when the screen size is adjusted. How can I make it responsive so that the image ...

Issues with the CSS code causing the dropdown menu to malfunction

Having trouble getting my CSS to apply when creating a drop-down menu. I've set up UL and LI elements for the dropdown, but the styling is not rendering as expected. Check out the screenshot below for a look at how it currently appears using developer ...

How can I show a Spinner component overlay in a TextField, replacing the usual iconProps rendering the icon in Fluent UI?

I am looking for a way to conditionally display the Spinner component in the exact location where an icon would normally appear if passed to iconProps in TextField. I have managed to implement conditional rendering of the icon and spinner, but incorporat ...

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Our web designer has implemented special pages for Internet Explorer by using IE-specific comments. This means that certain stylesheets are only loaded if the user is using a specific version of IE: <!--[if lt IE 7]> <link type="text/css" rel="st ...

Creating a unique data attribute in Alpine.js - A step-by-step guide

I am looking to establish a custom attribute and modify the value when clicked. This is my current setup: <div x-data="{ colorred = true }"> <div @click="colorred = !colorred">set red state</div> </div> I ...

The .htaccess directive aimed at eliminating .html from the URL appears to be malfunctioning

Struggling to remove the .html extension from your page URLs? I've been trying various methods with the .htaccess file, but nothing seems to be working. I created an .htaccess file and placed it in the public_html directory. The code snippet I'm ...

Ways to ensure the text on my website scrolls into view as the user navig

Is there a way to have my text show up as I scroll? I came across this , but I'm interested in how it actually functions. I saw a similar inquiry before, but it doesn't make sense to me. Can someone please explain or provide some examples on how ...

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

choose from the list of options that appear above the control

It's strange, but no matter how simple the example is - whether it's regular HTML or Bootstrap - the option list always appears on top of the select control itself. I have no idea why this is happening. Can someone help me with this issue? Here ...

Detecting the maximum width in Firefox using a C# media query

I am looking for a specific media query that will only be activated in Firefox and only when the window size is less than 1352px. I have experimented with different variations like @@-moz-document url-prefix() and media only screen and (max-width: 1352px) ...

Setting a default currency value (either in dollars or euros) in an input field

Is there a way to automatically insert a currency symbol (€, $) in a text field by default when entering a number? Are there any default values for this feature? Thank you Here is an example ...

Vue is currently operating in development mode

I keep receiving this notification each time I visit the site: Vue is currently running in development mode. Remember to switch to production mode when deploying for production. Find more helpful tips at .... I came across a solution from someone suggest ...

Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Here is an example of my HTML code: <div id="slideClick"> <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;"> <span class="sideMsg">MESSAGES</span> </d ...

Tips for aligning text and image in the center of a div with a specific width:

I'm having a hard time figuring this out for some reason. I need to center both text and an image on the same line within a div that has a 100% width. Check out this jsfiddle link for reference: http://jsfiddle.net/JnbeJ/ ...

The touchstart event is activated when you touch an item within

Is it possible to retrieve the index of ul li elements with touchstart, similar to how it can be done with a click function? <ul id = "list" ontouchstart="touchStart(event,'issues')"> <li> ...

Despite having unique ids, two file input forms are displayed in the same div in the image preview

Running into a minor issue once again. It may not be the most eloquent query, but I'm genuinely stuck and in need of some assistance. I am attempting to showcase image previews of selected files in a file input form. I have a jQuery script that reads ...