Question 42931 in Html Question posted in
Some basic documentation can be found here.

my border color doesn't change into black or white? – Html

I am implementing a project and when I try to set color white to my
input border, it just turns into gray instead of white ,but its just fine with other colors like red or orange except with black, I have the same issue with black.

code:

.add {
  display: flex;
  justify-content: center;
  margin-bottom: 1.3rem;
  border-color: white;
  border-width: .3rem;
  border-style: solid;
}

.addButton {
  margin-left: 16.8rem;
  position: absolute;
  cursor: pointer;
  font-size: 1.3rem;
}

.add input {
  position: relative;
  outline: none;
  text-indent: .5rem;
  font-size: 1.3rem;
}

.add input::placeholder {
  font-size: 1.25rem;
}
<form class="add">
  <input class="addBook" type="text" required maxlength="50" pattern="S(.*S)?" title="Your book name can't start or end with white space and should 
     include at least 1 non-white space character" placeholder="e.g Harry Potter" name="" id="">
  <button class="addButton">Add</button>
</form>

p.n:enter image description here

p.n2enter image description here

Tags:

2

Answers


  1. 0

    Instead of setting the border in the .add class, set the border color in the other class .add input

    .add {
  display: flex;
  justify-content: center;
  margin-bottom: 1.3rem;
  /* This is not the input class, this is the entire form. */
  /* Setting the border here will not change the border of your input. */
}

.addButton {
  margin-left: 16.8rem;
  position: absolute;
  cursor: pointer;
  font-size: 1.3rem;
}

.add input {
  position: relative;
  outline: none;
  border-width: .3rem;
  border-style: solid;
  border-color: black; /* This is the input class so changing this border will work */
  font-size: 1.3rem;
}

.add input::placeholder {
  font-size: 1.25rem;
}
    Login or Signup to reply.
  2. 0

    According to this code, We can see the border-color property in our code adjust in form tag that containing input tag and button tag.

    If we give a border-color: white; property to input tag we can identify that border color of input tag changed into white, but the top and left side borders remain gray.

    enter image description here
    Thru with new Image, I am sorry but I couldn’t clearly identify how the hierarchy of HTML elements is set

    but I would like to suggest a way like below

    1. set border-style: none; to input tag
    2. wrap input tag with a div tag
    3. give 'border-color: white;' to div tag
    • div is a block-level element so it gets bound that its child element

    This may be far from what you want, and may not be a recommended method but I hope it will help you a little in the process of finding a solution.

    .add {
  display: flex;
  justify-content: center;
  margin-bottom: 1.3rem;
  padding: 1rem;

  border-color: black;
  border-width: .3rem;
  border-style: solid;
    /* We can see border-color property was adjust to .add 'form'
now, We will change input border color */

  background: #00ACC2;
}

.addButton {
  margin-left: 16.8rem;
  position: absolute;
  cursor: pointer;
  font-size: 1.3rem;
}

.add .wrapdiv{
  border-style: solid;
  border-color: white;
  border-width: .3rem;
}

.add input {
  position: relative;
  outline: none;
  text-indent: .5rem;
  font-size: 1.3rem;

  border-style: none;
  background: black;
}

.add input:focus {
  color: white;
}

.add input::placeholder {
  font-size: 1.25rem;
}
    <form class="add">
  <div class = "wrapdiv"><input class="addBook" type="text" required maxlength="50" pattern="S(.*S)?" title="Your book name can't start or end with white space and should 
     include at least 1 non-white space character" placeholder="e.g Harry Potter" name="" id=""></div>
  <button class="addButton">Add</button>
</form>

    Take care and have a peaceful Easter day🐣

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search