What could be the reason for my Form styling failure?

Currently working on freecodecamp's portfolio creation exercise. It should be a straightforward task, but I'm facing a small issue that's puzzling me.

I'm trying to remove the border and outline (when focused) from my contact-area form, but my attempts have been unsuccessful so far.

If you'd like to take a look, here's my codepen link - https://codepen.io/illpill/pen/WRgoVo?editors=1100

input, textarea {
  color: #333 !important;
  width: 100% !important;
  border-bottom: 2px solid #666 !important;
  border-top: 0px !important;
  border-right: 0px !important;
  border-left: 0px !important;
  background-color: #e3e3e3 !important;
  font-size: 22px !important;
}

input:focus {
    outline: none !important;
}

This is the CSS in question. Can anyone spot what might be going wrong?

htmlcssforms

Answer №1

Include the following CSS

.form-control:focus {
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

See it in action - https://example.com/code-demo

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

Conceal a division using CSS based on its data-role attribute

After extensive research, I have yet to find a solution. Let's say there is a div structured like this: div[data-role="form-footer"] What would be the most effective method for hiding it, and can it be done using CSS? I've tried the f ...

htmljquerycss

I'm having trouble with my dropdown navigation menus - they keep popping back up and I can't seem to access

My website is currently in development and can be accessed at: The top navigation bar on the homepage functions properly across all browsers. However, there are three sections with dropdown submenus - About Us, Training, and Careers. These dropdown submen ...

javascriptphphtmlcss

text/x-handlebars always missing in action

I'm currently working on my first app and I'm facing an issue with displaying handlebars scripts in the browser. Below is the HTML code: <!doctype html> <html> <head> <title>Random Presents</title> ...

javascripthtmlember.jshandlebars.js

links to css and javascript

I am having trouble with what should be a simple task! On my webpage, I have this link: <a class='action' href='javascript:void(0)' OnClick='run()'> run </a> Along with the following CSS: .action { color: # ...

javascripthtmlcss

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

cssruby-on-railsnavbarbootstrap-4

Using jQuery to toggle the visibility of div elements while displaying an indicator

A query arises regarding the utilization of JQuery to facilitate toggling the visibility of text divs. The question pertains to how one can incorporate an indicator - such as an up and down arrow graphic - to denote whether the divs are open or closed. Sug ...

jquerycssshow-hide

Is it possible to have dual images as the background for an HTML div?

Is it possible to use two images for a DIV background in CSS? I have one image that is just the background color and another that is a logo. Here's the code snippet I am currently using: .header{ background-attachment: scroll; background-clip ...

csshtml

How can I use CSS to make the row and column headers of a table freeze while scrolling within an overflow

I am currently working on implementing frozen row and column headers in a table within a content wrapper, similar to what you see in Excel. However, I have been facing challenges with using CSS tricks that involve the position:absolute property, especially ...

htmlcss

Scrolling seamlessly on websites with a single page

I am developing a single-page website that uses different section IDs instead of multiple pages. It's functioning properly, but I want to implement smooth scrolling to the sections rather than just statically jumping to them on the page. Jsfiddle: ht ...

javascriptjqueryhtmlcssscroll

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child

Hi there, I'm new to jQuery and could use some help. I'm attempting to retrieve specific information like CPU and RAM details from a particular phone model. I've written the jQuery code, but I'm having trouble displaying the RAM and CPU ...

javascripthtmljqueryxmlapi

Validation is only effective for the initial row and fails to apply to subsequent rows. This may be due to the necessity of including the return true/false statement in my validation process

HTML PHP <div align="center"><input type="text" class="form-control" id="<?php echo $i;?>" name="r2<?php echo $i+1;?>" onblur="mvalidate2()" style="text-align: center; bo ...

javascriptphphtmlarraysvalidation

Steps for dynamically changing the class of a dropdown when an option is selected:

Check out this code snippet : <select class="dd-select" name="UM_Status_Engraving" id="UM_Status_Engraving" onchange="colourFunction(this)"> <option class="dd-select" value="SELECT">SELECT</option> <option class="dd-ok" value= ...

javascriptjqueryhtml

Utilize CSS to ensure that the hover effect of the main navigation remains active even when the mouse hovers over the sub-menu

Is there a way to make the hover state in navigation items persist when the mouse hovers over a sub-menu? Currently, when hovering over a top-level nav item, the link color changes to white and background turns black, but this reverts back once the mouse m ...

csshover

Finding the current HTML page URL in Ionic 2: A step-by-step guide

Can the URL of the current HTML page be obtained and then converted to PDF using the cordova-pdf-generator package? ...

htmlpdfnpmionic2

Could anyone provide assistance with creating responsive CSS styles for a website?

I am currently utilizing Drupal for my website. In my kickstart sub theme, which is a subtheme of omega, I have added a sitename and slogan. Additionally, I inserted a telephone number through the branding.tpl.php file. However, when I resize the window, t ...

cssdrupalresponsive-designthemesstylesheet

Column that adjusts to different screen sizes

In the realm of responsive web design, what methods are suggested to achieve the specified CSS display? My main requirement is to have a maximum of three columns. The content should be divided evenly among these three columns. I prefer using SCSS and wel ...

htmlcss

Invisible style date input value on iPhone mobile devices

My goal is to enhance the appearance of an HTML5 input with a custom icon, using a font pack. Although I mention FontAwesome in this example, in reality, I'm utilizing a different custom font pack. On my mobile device (iPhone X), I can see the calend ...

htmlcss

What is preventing FancyBox from functioning properly?

Seeking assistance in implementing FancyBox for an e-commerce website I am developing for a client. Despite trying various tutorials and troubleshooting steps over the course of three days, I have been unable to get it to function properly. Not encounterin ...

jqueryhtmljquery-pluginsfancyboxfancybox-2

Ensuring elements are properly centered within a Bootstrap grid while adjusting the window size

I've been facing a challenge with making my web page resizable. Even though I managed to center the elements using margin properties, whenever I try resizing the browser window, the logo and ship images lose their positions. They end up falling out of ...

cssbootstrap-4resize

Are inline styles being utilized in a Styled component?

I'm currently utilizing styled-components within a React project and I am having trouble finding documentation regarding whether or not a styled component can accept inline styles on the "style" property. For example: The Text component has been styl ...

cssreactjsnext.jsstyled-components