What steps should I take to eliminate the black border around my input fields?

I recently noticed that there are black boxes around the input area on the form I am creating. Is there a way to remove them? I am using bootstrap, so I'm not sure if that is causing the issue. Any suggestions would be greatly appreciated! https://i.sstatic.net/XSLLX.png

.form-input-styling {
  border-radius: 0 2em;
  padding: 0 10px;
  width: 50%;
  border: none;
  line-height: 2em;
  margin-bottom: 20px;
  background-color: #f25b43;
}
  <div class="row">
            <div class="col-12"><input class="form-input form-input-styling" type="text" id="fname" name="fname" required placeholder="Name"></div>
            <div class="col-12"><input class="form-input form-input-styling" type="email" id="email" name="email" required placeholder="Email"></div>
            <div class="col-12"><input class="form-input form-input-styling" type="tel" id="phone_num" name="phone_num" placeholder="Phone Number"></div>
            <div class="col-12"><textarea id="text-area" name="textarea" rows="4" cols="50" placeholder="Enter Your Message Here"></textarea></div>
            <div class="col-12"><input type="submit" value="Submit"></div>
    </div>

htmlcssbootstrap-4

Answer №1

To remove the outline from the input element, add outline: none; to your CSS styling.

.input-style {
  border-radius: 0 2em;
  padding: 0 10px;
  width: 50%;
  border: none;
  outline: none;
  line-height: 2em;
  margin-bottom: 20px;
  background-color: #f25b43;
}

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

Saving an image in Flask and securely storing it in a local directory

I am looking to implement a functionality where I can upload an image and pass it to the Python code in Flask for local storage. While following a tutorial, I encountered an issue with the query as the request always returned 'No file part': if & ...

pythonhtmlflask

What is the best way to fit the text into a DIV row as efficiently as possible?

Looking for a solution to prevent a span from dropping down to the next line when text is too long within a fixed width and height row. The row consists of three elements, two with fixed widths and the third containing a span and text. Constraints include ...

htmlcss

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Utilizing the Google Maps API, I have implemented a system to dynamically add map markers tracking 2 of our company's vehicles. The website is developed in asp.net c# mvc with bootstrap 4.3.1. An ajax request retrieves the latest marker location from ...

javascripthtmlcssajaxgoogle-maps

Form popup that closes without refreshing the page upon submission

My goal is to make this form close when the button is pressed without refreshing the page, as Ajax code will be added later. The form functions as a pop-up, so it needs to close once the button is clicked. Currently, I can click the button without a refres ...

jqueryhtmlajaxforms

Animating a child element while still keeping it within its parent's bounds

I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...

javascriptjqueryhtmlcssanime.js

Is there a way to make the content overlap the video when I scroll down?

My goal is to create a scrolling effect where the content in the div underneath slowly overlaps the video as I scroll down, similar to the design on the Minecraft homepage. ...

htmlcssbootstrap-4

Guide on incorporating a thymeleaf custom dialect in an HTML script

Essentially, I am trying to create a dynamic schema using ld+json with thymeleaf. To fetch the URL for the corresponding page, we have set up a custom processor as shown below: public class CustomUrlAttributeTagProcessor extends AbstractAttributeTagProcess ...

javahtmljsonthymeleafschema.org

What is causing the horizontal misalignment of these divs? Why are they breaking onto separate lines?

This HTML code snippet contains a div element with nested divs styled with different border properties. The red divs are not displaying in the same horizontal row. What could be causing this issue and how can it be resolved to ensure that all red divs are ...

htmlcssalignment

Preserve the content in an input text field within ASP.NET

In my web application, I have an input text field that acts as a datepicker. When a button is clicked, the form data is validated, and if any condition fails, an alert is displayed to the user. <script src="https://code.jquery.com/jquery-1.12.4.js"> ...

htmlasp.net

What is the method for notifying the latitude within this Google Maps javascript code?

There's a specific line that triggers an alert showing "undefined". However, when I just alert results[0].geometry.location, it displays (41.321, 41.556). My goal is to alert this value and then convert it (as an integer) to my id_lat and id_longs... ...

javascripthtmlcssapigoogle-maps

Which is better: Utilizing Ajax page echo or background Ajax/direct HTML manipulation?

I am facing a dilemma and I could really use some guidance. Currently, I am in the process of developing an ordering system using PHP/Smarty/HTML/jQuery. The main functionality revolves around allowing sellers to confirm orders on the site. My goal is to ...

javascripthtmlajaxmaster-detailhtml-manipulation

The jQuery alert code provided seems to be ineffective

It seems like I have encountered an issue with Javascript and jQuery: <script> function myFunction() { document.getElementById("tr_edit").innerHTML = "YOU CLICKED ME!"; } </script> I am able to get the javascr ...

javascripthtmljquery

Tips for creating a dynamic curved SVG path

I'm looking to draw a black border only along the inside of this SVG. I've tried adding stroke and setting the stroke-width, but that applies the border to the entire SVG. Is there a way to limit the stroke to a certain point within the SVG? d ...

javascripthtmlsvgpath

Sequentially display and hide jQuery divs without any overlap

I'm in the process of developing a feature where a series of divs are displayed sequentially after clicking a button. Simultaneously, I am also enabling webcam capture and sending the picture to a server. The functionality is mostly working as intende ...

javascriptjqueryhtml

Icon alignment to wrapped text width has been successfully achieved with the implementation of Flexbox onto a single

I am facing an issue with text wrapping within a flexbox. I want the width of the flex item to always match the length of the wrapped text so that an icon placed next to the item stays adjacent to the text. However, due to text wrapping, there is a gap bet ...

htmlcssflexbox

The arrangement of my inline-block divs is oddly meandering in a zig-zag pattern

I am attempting to visualize basic commands and their arguments in HTML. Here is the expected output: https://i.stack.imgur.com/MTxbV.png However, the actual output looks like this: https://i.stack.imgur.com/biPFw.png This is the code I utilized: ht ...

css

Unable to click on the password field using a mouse - encountering a problem on a PHP

The link to access the email admin panel is While I am able to click on the username field, I am unable to click on the password field. The only way to place focus on it is by using the tab button on the keyboard. Initially, everything was functioning co ...

htmlcss

html - automatically populating input fields when the page loads

Currently, I have an HTML form embedded in the view and I am looking for a way to automatically populate specific input fields with json variables obtained from the server. Instead of manually writing JavaScript code for each field, my goal is to access th ...

javascriptjqueryhtmljsononload

Despite being a valid <link rel="shortcut icon">, a validation error occurs

I'm encountering an error with the w3.org validator related to this line of code: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> The error message provided is as follows: Line 1, Column 727: Invalid value shortcut icon f ...

htmlfaviconw3c-validation

Prevent Bootstrap 5 input fields from automatically adjusting to the height of a CSS grid cell

Below is some Bootstrap 5 markup that I need help with. The first example is incorrect. I don't want the Bootstrap input to be the same height as the grid cell. The second example is right, but I want to achieve the same result without using a wrapp ...

htmlcssbootstrap-5