Why is border-color overridden by color?
Why is “border-color” overridden by “color”? .... border color renders as black, not red as I would expect, as
border-coloris set aftercolor. Thoughts?
Your problem lies within how you've declared your border- properties:
border-color: red; /* sets the border color to red */
border: 3px solid; /* sets the border color to default (black) */
You're using the shorthand for all border properties using border, and since you didn't specify any color within border, it's set to the default color, which is black in this case, as defined by the color property1. And since you're declaring border after border-color, you're over-riding red with black.
Simply remove border-color and specify any border color within the border property...
border-color: red; /* <-- REMOVE THIS LINE */
border: 3px solid red; /* set the border color here */
1 "A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color)."
Border color in JavaScript form doesn't override
Your selectors need to be more specific than the Bootstrap selectors that are being applied. See the CSS comments for details.
Next, your validation function doesn't seem to ever return anything, so the submit event will never be stopped when you have invalid data. Do all your event handling in JavaScript with modern code using .addEventListener(), not in HTML with event attributes. When you use this model, your event handling function will automatically be passed an event object and that object is what you can call .preventDefault() on to cancel an event.
Also, working with the element.classList API is much simpler than working with the element.className property.
Additionally, use .textContent when setting/getting strings that do not contain any HTML and use .innerHTML only when the strings do contain HTML (as .innerHTML causes the browser to parse the HTML from the string, which is a waste of resources when there isn't any).
// Get all the DOM references you'll need, just once when the DOM is ready and don't// set your variables directly to properties of those elements because if you ever// decide you want a different property of a DOM object, you'll have to query the DOM// for the same element all over again.var first = document.getElementById("first");var firstID = document.getElementById("firstid");var last = document.getElementById("last");var email1 = document.getElementById("email1");var password1 = document.getElementById("password1");var parentFirst = document.getElementById("parent-first");var parentLast = document.getElementById("parent-last");var childFirst = document.getElementById("child-first");var email2 = document.getElementById("email2");var password2 = document.getElementById("password2");var month1 = document.getElementById("month1");var day1 = document.getElementById("day1");var year1 = document.getElementById("year1");var month2 = document.getElementById("month2");var day2 = document.getElementById("day2");var year2 = document.getElementById("year2");
// Well get the radio buttons and put them into an array for easier loopingvar radios = Array.prototype.slice.call(document.querySelectorAll("input.type['radio'].form-check-input"));
// Configure event handlers in JavaScript, not in HTMLdocument.querySelector("form").addEventListener("submit", validateSignUpKeyup);first.addEventListener("input", validateSignUpKeyup);month1.addEventListener("change", changeDate1);
radios.forEach(function(rad){ rad.addEventListener("click", radioCheck);});
function validateSignUpKeyup(evt) { var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var nameFilter = /^([^0-9]*)$/; // First name can't be blank if (first == "") { first.classList.add("error"); firstID.textContent = "Can't be blank"; evt.preventDefault(); } else if (!nameFilter.test(first)) { // First name can't be a number first.classList.add("error"); firstid.textContent = "Can't have numbers"; evt.preventDefault(); } else if (first.length > 50) { // First name can't be longer than 50 characters first.classList.add("error"); firstid.textContent = "Name is too long"; evt.preventDefault(); } else { // First name no error first.classList.remove("error"); firstid.textContent = ""; }}
function radioCheck(){}
function changeDate1(){}/* No need for valid and invalid classes. Set "valid" style as the default and then apply or remove the "invalid" class as needed.
Either way, you've got to make your selectors more specific than the default Bootstrap ones, otherwise they will not override Bootstrap. Adding the element type and the Bootstrap class along with your class usually does the trick.*/input.form-control { border: 2px solid green; } input.form-control.error { border: 2px solid red;}
body { background-image: url(../../Icons/violin.jpeg); background-repeat: no-repeat; background-position: center absolute; } @media only screen and (min-width: 768px) { #box { margin-top: 60px; margin-bottom: 20px; } } @media only screen and (min-width: 768px) { body { background-size: cover; } } #box { border-radius: 5px; background: white; } .blue-button { background-color: #00b4ff; color: #fff; margin-top: 2.8%; margin-bottom: 2.5%; width: 100%; } #logo { margin-top: 20px; } h1 { font-size: 1em; font-weight: normal; margin-top: 15px; margin-bottom: 15px; } #individual { display: block; } #parent { display: none; } #small { font-size: 0.8em; } .month-space { margin-right: 0.9em; } .day-space { margin-right: 0.9em; } .year-space { margin-right: 0.9em; } .radio { margin-bottom: 15px; }<!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!--- Include CSS --><link rel="stylesheet" href="Student-Sign-Up.css" type="text/css" /> <div class="container"> <div class="row"> <div class="col-md-5 mx-auto" id="box"> <!-- Logo and Sign Up Text --> <div class="text-center"> <a href="#"> <img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" /> </a> <h1>Signing up as</h1> </div> <!-- Radio check 1 --> <div class="form-check form-check-inline radio"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="radios" id="radio1" checked> Individual </label> </div> <!-- Radio check 2 --> <div class="form-check form-check-inline radio"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="radios" id="radio2"> Parent of a child </label> </div> <!-- Individual Form --> <form id="individual" action="#" method="POST" autocomplete="off"> <!-- Individual First Name --> <div class="form-group"> <span id="firstid" class="text-warning"></span> <input class="form-control" id="first" name="first" type="text" placeholder="First name"> </div> <!-- Individual Last Name --> <div class="form-group"> <span id="lastid" class="text-warning"></span> <input class="form-control" id="last" name="last" type="text" placeholder="Last name"> </div> <!-- Individual Email --> <div class="form-group"> <span id="email1id" class="text-warning"></span> <input class="form-control email" id="email1" name="email" type="text" placeholder="Email"> </div> <!-- Individual Password --> <div class="form-group"> <span id="password1id" class="text-warning"></span> <input class="form-control" id="password1" name="password" type="password" placeholder="Password" > </div> <!-- Individual's Birthday --> <div class="form-group"> <label>Birthday</label> <div class="form-inline"> <!-- Month --> <select id="month1" name="month" class="form-control month-space"> <!-- Give any <option> that doesn't count as a valid choice a value of "". This makes is simple to test for. Also, don't bother giving the valid options values that are essentially nothing more than indexes because you can get that number anyway with var selectedIndex = month1.selectedIndex; --> <option value="">Month</option> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <!-- Day --> <select name="day" id="day1" class="form-control day-space"> <option value="">Day</option> </select> <!-- Year --> <select name="year" id="year1" class="form-control year-space"> <option value="">Year</option> </select> <span id="date1id" class="text-warning"></span> </div> </div> <button type="submit" name="submit" class="btn blue-button">Confirm</button> </form> <!-- Parent Form --> <form id="parent" class="hidden" action="#" method="POST" autocomplete="off"> <!-- Parent's First Name --> <div class="form-group"> <span id="parent-firstid" class="text-warning"></span> <input class="form-control" id="parent-first" name="parent-first" type="text" placeholder="Parent's first name"/> </div> <!-- Parent's Last Name --> <div class="form-group"> <span id="parent-lastid" class="text-warning"></span> <input class="form-control" id="parent-last" name="parent-last" type="text" placeholder="Parent's last name" /> </div> <!-- Parent Email --> <div class="form-group"> <span id="email2id" class="text-warning"></span> <input class="form-control" id="email2" name="email" type="text" placeholder="Email" /> </div> <!-- Parent Password --> <div class="form-group"> <span id="password2id" class="text-warning"></span> <input class="form-control" id="password2" name="password" type="password" placeholder="Password" /> </div> <!-- Child's First Name --> <div class="form-group"> <span id="child-firstid" class="text-warning"></span> <input class="form-control" id="child-first" name="child-first" type="text" placeholder="Child's first name" /> </div> <!-- Child's Birthday --> <div class="form-group"> <label>Child's birthday</label> <div class="form-inline"> <!-- Month --> <select id="month2" name="month" onChange="changeDate2(this.options[selectedIndex].value);" class="form-control month-space"> <option value="na">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <!-- Day --> <select name="day" id="day2" class="form-control day-space"> <option value="na">Day</option> </select> <!-- Year --> <select name="year" id="year2" class="form-control year-space"> <option value="na">Year</option> </select> <span id="date2id" class="text-warning"></span> </div> </div> <button type="submit" name="submit" class="btn blue-button">Confirm</button> </form> <p class="text-center" id="small">By signing up you agree to our <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a> </p> </div> </div> </div> <!-- Date Script --> <script src="Date.js"></script> <!-- Form Validation Scripts --> <script src="Validate-Form.js"></script> <script src="Validate-Form-Keyup.js"></script> <!-- Radio Check Script --> <script src="Radio-Check.js"></script> <!--- Bootstrap Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>Why is the CSS border-color inheriting the color property?
Based on section 4.1 of the relevant Backgrounds and Borders Module spec, the initial border-color value is currentColor:
CSS Color Module - 4.4.
currentColorcolor keywordCSS1 and CSS2 defined the initial value of the
border-colorproperty to be the value of thecolorproperty but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced thecurrentColorvalue for thefill,stroke,stop-color,flood-color, andlighting-colorproperties.CSS3 extends the color value to include the
currentColorkeyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.
In other words, the value is treated as the following in your case:
border: 4px solid currentColor;
Therefore you could also use the currentColor value for something such as the background-color property. For instance:
div {
color: red;
width: 100px;
height: 100px;
border: 4px solid;
background-color: currentColor;
}<div></div>HTML input default chrome border-color override with CSS not working
In order to use border-color in this way, you would need to set the width and style:
border-color: red;
border-style: solid;
border-width: 15px;
Alternatively, you can set border: 1px solid blue; and then after that, override just the color using border-color: red;. This works, but only because the wodth and style have already been set.
Why does .border-0 override .border-bottom in Bootstrap 4.0.0
This is basically answered in Why is there an important override on the border classes's color property in Bootstrap?
As you can see in the docs, the borders are additive and subtractive.
The border--*-0 classes are meant to remove borders, either all or specific sides, from an element that already has borders such as the card.
The other border-* classes are meant to add borders.
Therefore, in the case of border-0 border-bottom, yes border-0 removes borders from all sides as intended. In your example, it doesn't make sense to use border-0 because the box doesn't have borders to start with.
If you wanted to only show a border-bottom border-primary on an element that already has borders (ie: card), you'd use: border-primary border-left-0 border-right-0 border-top-0... border-primary to changes the existing border color, and border-left-0 border-right-0 border-top-0 to remove the existing border.
CSS class won't override border-style
Try this:
.form_field_error {
border: 1px solid #f00 !important;
}
CSS Property Border-Color Not Working
By default the border-width is 0 and border-style is none
So you need to set them to border-width:1px and border-style:solid. You can combine all the border properties into one as below:
#box {
border:1px solid red
}
How to override border-color in outlined styled TextField component in Material-UI
Here's how to override border-color on OutlinedInput (material-ui v4).
I made a codesandbox here
const defaultColor = "#ff0000";
const hoverColor = "#0000ff";
const focusColor = "#00ff00";
const theme = createTheme({
overrides: {
MuiOutlinedInput: {
root: {
// Hover state
"&:hover $notchedOutline": {
borderColor: hoverColor
},
// Focused state
"&$focused $notchedOutline": {
borderColor: focusColor
}
},
// Default State
notchedOutline: {
borderColor: defaultColor
}
}
}
});
border radius creating a black color
TL;DR. Set your intended border color to override default
Browsers have a certain default style values per HTML elements (e.g. color, width, margin, etc). Because you define a part of border style set (e.g. border-radius) but not all , the browser simply uses its default values. In this case, the border color of black.
You can just assign your preferred border color and style. See the code snippet below, where I added a border style to input element.
body {
margin: 0;
padding: 0;
text-align: center;
}
.title {
margin-top: 5%;
}
form {
margin-top: 10%;
}
.field {
display: block;
margin: 0 auto;
height: 38px;
width: 20%;
border-radius: 10px;
}
input {
/* Set your intended border color here */
border: 1px solid #ddd;
}
.email {
border-radius: initial;
}
.top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.password {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.bottom {
margin-top: 10px;
border: 0;
}<h2 class="title">Daily Newsletters Mail Service</h2>
<form action="" method="post">
<h2>Sign-In</h2>
<input class="field top" type="text" name="username" autofocus="true">
<input class="field email" type="email" name="email" placeholder="xyz@email.com">
<input class="field password" type="password" name="password" placeholder="Yx73@ysd">
<input class="field bottom" type="submit" name="signup" value="Sign-Up">
</form>Related Topics
Safari Position:Sticky Not Working in an Overflow:Auto Element
Does CSS3 Offer a "Minimum-Size" Property for "Background"
No Possibility to Select Text Inside <Input> When Parent Is Draggable
How to Include "Leaflet.CSS" in a React App with Webpack
Stack CSS Transitions Using Multiple Classes Without Overriding
CSS Columns: Target Last Child in Each Column
Background-Size Transition on Hover Causes Chrome to "Shake" Background Image
Fill a Parent Div While Maintaining a Ratio
How to Make a Div Disappear on Hover Without It Flickering When The Mouse Moves
Select All Block Level Elements with CSS
Angular 2 - Jquery | Adding Styles (Top/Left) with a Mouse Position