Having trouble with the border styling on my HTML input form

I've been struggling to add a solid black border around the text input in my form. However, no matter what I try, the border doesn't seem to style correctly. Here's the code snippet I'm using:

#forminput {
  border: solid black !important;
  border-top: solid black !important;
  border-bottom: solid black !important;
  border-width: 0 2px !important;
  border-radius: 2px;
}
button {
  width: 100px !important;
  height: 30px !important;
  background-color: #095ba0 !important;
  border: 1px !important;
  border-color: #095ba0 !important;
  color: #fff !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  border-radius: 2px !important;
}
<form action="*" method="POST">
  <input id="forminput" type="text" name="uid" placeholder="Username" ><br><br>
  <input id="forminput" type="password" name="pwd" placeholder="Password" ><br><br>
  <button type="submit">Sign In</button>
</form>

Despite using this code, my form inputs still look like they don't have borders as expected. What could be causing this issue?

Answer №1

It's not necessary to set the top and bottom border widths to 0.

A more concise way of styling the input element is:

#forminput {
  border: solid black 2px;
  border-radius: 2px;
}
<input id="forminput">

Answer №2

Give this a shot:

#forminput {
    border: 2px solid #000;
}

By using this code, you can add a 2px solid black border around all sides of your input.

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

Submitting a form using jquery in HTML

Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...

Modifying the color of Bootstrap icons

When I use PHP code to print this icon into a table, it looks like this: echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons">&#xE0BE;&l ...

What are some ways to modify a Vue template without the need to recompile?

Is it feasible to modify a Vue template's HTML without the necessity of recompiling the Vue file? ...

Selecting a webpage from a dropdown list to display its specific content within an iframe

I have a dropdown menu similar to this: <form name="change"> <SELECT NAME="options" ONCHANGE="document.getElementById('frame1').src = this.options[this.selectedIndex].value"> <option value="">Choose</option> <opti ...

The right column in a relatively positioned layout descends as an element in the left column is revealed

Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...

Adjust the color of the bootstrap navbar upon resizing the screen

Attempting to modify the background color for the navbar menu items on smaller screen sizes. An issue arises in the following scenario: Browser window is resized until hamburger menu appears Hamburger menu is clicked to display menu i ...

The function of jQuery's .prop('defaultSelected') appears to be unreliable when used in Internet Explorer 9

Below is the code I am currently using: $selects = $('select'); $selects.val( $selects.prop('defaultSelected')); The purpose of this code is to reset the values of all select elements on my webpage. However, I am facing an issue in IE ...

Integrating data binding within a .append function using AngularJS

I followed this code example (http://jsfiddle.net/ftfish/KyEr3/) to develop a form. However, I encountered an issue with an input having ng-model set to "value" and needing to display that value within {{ }} in a TD: angular.element(document.getElementByI ...

Customizing the Height of Elements in Bootstrap

When working with two columns in bootstrap, let's say one column has a height of 800 PX. If you want the text in the second column to start after 200 PX, is there a way to achieve this without using padding or margin? Are there any predefined classes ...

Creating an overlay effect when hovering over an image

Recently, I've been working on a gallery of photos that showcases different individuals. My goal is to have information about each person displayed when their respective photo is hovered over - including their name and role. .gallery { position: ...

Manipulating contextual selectors

Have you ever tried reverting or overriding attributes from contextual selectors? .card { padding-top: 20px; ... } .card .card-header { padding: 0 20px; } .card .card-header.news { padding-top: 0px; } Do you think it's possible to elimina ...

creating a table with only two td's for formatting

My ultimate goal is to keep my web form code as minimal as possible for easier maintenance. I am currently working on creating a questionnaire and have been using two td elements for this purpose. Here is an example of what the current text structure looks ...

Get your columns in order with Bootstrap4

I need to rearrange my 3 columns on desktop and mobile devices in different ways. Currently, my grid structure is set up like this: <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md- ...

The value of Angular Input remains unchanged within a FormArray

I am experiencing an issue with the Sequence No in my PreprocessingForm's FormArray. When I add a new row, the Sequence No does not change as expected. <tr class="mat-row" *ngFor="let dynamic of PreprocessingForm.controls.arithmeticI ...

Choose all the items that share a specific hue?

How can I target all elements with a specific color? I need to update all text that has a color of #1a0dab to #00b0f4. ...

having difficulty retrieving website content using the ui.router

This is my HTML code: <!doctype Html> <html lang="en"> <head > <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/l ...

Looking for straightforward tips on parsing CSS code

Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...

Angular 2's subscribe method allows for actions to be taken in response to

There are two buttons, one of which is hidden and of type file. When the user clicks the first button, a confirmation dialog opens. Upon clicking "Ok" in the dialog, the second button should be clicked. The issue arises when all the logic in the subscribe ...

Enable only the current week days on the multiple date picker feature

Can anyone recommend a date picker that only shows the current week and allows for multiple date selections by the user? I found this jsfiddle which limits the display to the current week, but it doesn't support selecting multiple dates. I attempted ...

The grouping functionality of the Material UI Buttongroup seems to be failing to properly

Working on a review score list currently, where I've set up a RadioGroup with RadioButtons. However, the issue is that the RadioButtons are not aligning properly with the RadioGroup. The goal is to have the radiobuttons styled similarly to the exampl ...