Adjusting the border color and eliminating the shadow effect surrounding the box

Looking to get rid of the box shadow and change the border color:

Tried this CSS code, but no luck so far:

.selector.noshadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

Any tips on how to remove the shadow and switch the border color from blue to red? Appreciate it!

Edit - Here's the HTML snippet:

<div class="form-group col-sm-3 col-sm-offset-3" style="background-color:#dcdcdc; padding:1em;">
    <div>
        <label for="createPassword">Create Password:</label>
        <input type="password" class="form-control" id="inputCreatePassword" placeholder="Enter a password" ng-model="createPassword">
    </div>
</div>
htmltwitter-bootstrapcss

Answer №1

Check out this CSS code snippet from Bootstrap that is causing the issue: 

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

To fix this, you can override those styles with the following code: 

#inputCreatePassword:focus {
  border-color: #ccc;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

Answer №2

Transform the appearance of your border color:

input{
 border:2px dashed blue;
}

To eliminate the focus effect:

input:focus{
    outline: none;
}

Take a look at this demo: https://jsfiddle.net/CLEAN_SMITH/99x8v5hg/7/

Answer №3

If you want to get rid of the box shadow, follow these steps:

.element.no-shadow {
box-shadow: none;
}

For removing the outline (note that it's different from a border), use this code:

#inputNewPassword {
outline-width: 1px;
outline-color: blue;
outline-style: solid;
}

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

"Tricky HTML table layout challenge: Margins, paddings, and borders causing

Working with HTML <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <img src="..."> </td> </tr> </tbody> </table> Applying CSS rules * { border: none; ...

javascriptjqueryhtmlcss

Chrome does not support gradient, while Firefox does

When I attempt to utilize the webkit gradient tag specifically for Chrome, it fails to function altogether. On the other hand, when tested on Firefox using background:-moz-linear-gradient(#000, #888);, it operates smoothly. Despite this, applying backgrou ...

htmlcssfirefoxgoogle-chrome

Stop the container from wrapping and allow its children to wrap instead

Here is a snapshot of my current layout: <div class="left"> ... </div> <div class="right"> <div class="inner" /> ... several more of these ... <div class="inner" /> </div> My CSS code looks like this: ...

htmlcss

Unable to click on element in Firefox browser

Encountering an issue with the following error message: Element is not clickable at point (791, 394). Other element would receive the click: Command duration or timeout: 66 milliseconds Any ideas on what's causing this? Using selenium web driver ve ...

htmlcssseleniumselenium-webdriverselenium-firefoxdriver

Today, I am experimenting with HTML5 File Upload using Capybara and Selenium Webdriver in Ruby

I have encountered a problem with a simple modal that allows users to upload a file using a browse button. Due to some unknown issue, possibly related to the fact that it is an HTML5 file input and the browser adds its own functions to it, testing this has ...

ruby-on-railsrubyhtmlselenium-webdrivercapybara

Adjust the size of the embedded iframe to match the dimensions of the containing div

Is there a method to resize the iframe embed code for a vine so that it fits within the boundaries of the enclosing div? The supplied embed code already includes sizing information as shown below: <iframe src="https://vine.co/v/iMJzrThFhDL/embed/simp ...

javascripthtmlangularjs

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...

javascriptcssangularbootstrap-4

ng-repeat fails to iterate over JSON data

I want to display some JSON data that I've received on my website. Here's the controller code: angular.module('web') .controller('runController', function($http, $scope) { $http.get('/#/runs') .success(fun ...

htmljsonangularjs

Personalize the font style of the icon property in Material UI Table when utilizing text in place of an icon

In my React app using Material UI table, I needed a custom event on the action button that displayed text instead of the usual icons for Add, Update, or Delete. Instead of creating my own icon, I opted to use text for the button like so... <MaterialTabl ...

cssreactjsmaterial-uimaterial-table

Is it possible to use jQuery animation to smoothly transition the background color?

I'm currently working on a function to dynamically change the background color of a div based on an array of colors. Here's what I have so far: HTML: <div class="bg-color"> CSS: .bg-color { width: 500px; height: 500p ...

javascriptjqueryhtml

What is the best way to have text wrap around an icon in my React application?

I am facing an issue while trying to display the note description over the trash icon in a React app. I have tried various methods but can't seem to achieve the desired effect. Can anyone guide me on how to get this layout? Here is what I intend to a ...

javascripthtmlcssreactjstypescript

How can I retrieve nested DOM Elements within a React component?

Within my application, I have implemented an input field and a reference to store the user input value. Additionally, there are several React Links within a div that provide recommended keywords for users to search. I am seeking a way to dynamically modif ...

javascriptcssreactjsdom

I am utilizing React to pull data from the database with a one-day discrepancy in the backend

Despite trying numerous solutions, I am still puzzled as to why this issue persists. For instance, in my database, there is a date listed under the "date_of_birth" column as 2023-12-29. However, when examining my backend code, it displays as "date_of_birth ...

javascripthtmlsqlreactjsdatabase

What is the best way to design bootstrap-style menus in React using TailwindCSS or styled-components?

As I dive into learning React, I find myself torn between using TailwindCSS and styled-components. While I am attracted to the simplicity of styled-components, I am hesitant about the lack of pre-built features that TailwindCSS offers, especially in terms ...

cssreactjstailwind-cssstyled-componentsbootstrap-5

Using Reactjs Material UI Table component results in grid expansion

I'm facing an issue with my Table component nested inside a Grid component. Whenever the Table component is rendered, it causes the Grid component to expand in width. I want the Grid component to maintain its original width when the Table component is ...

htmlreactjsmaterial-ui

Is there a way to change "display:inline-block" to "display: block" specifically for IE7?

Below is a code snippet that showcases the issue I'm currently facing. jsFiddle Demo <div class="normal"> <a href="#">Test</a> <a href="#">Test longer</a> </div> <div class="ib blockbyclass"> < ...

htmlcssinternet-explorer-7

Change the Bootstrap components according to the size of the screen

Is there a built-in Bootstrap feature to change an element's class based on screen size? I'm working on a webpage with scrollable card elements. On desktop, the cards are arranged horizontally, but on mobile they are stacked vertically, requirin ...

javascripthtmlresponsive-designbootstrap-5

Tips for resolving flickering animations in CSS and JavaScript

Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner. In the prov ...

javascriptcss

Guide to making a mobile number input field with a constant country code

I'm struggling to create a mobile input box that separates the mobile number and country code with a divider or fixes the country code in the field without success. Something similar to this image: https://i.sstatic.net/6HwYdZrB.png But I don't ...

htmlcssbootstrap-4

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

Yahoo! made headlines earlier this month by unveiling their new Mojito framework, set to be open sourced in 2012. I've been eager to learn more about this promising framework but haven't had any success so far. Does anyone know where I can find ...

javascripthtmlnode.jscssyahoo