Home / Questions / 300884
Accepted
ASASCED
Asked: 2020-10-15 18:43:53 +0800 CST 2020-10-15 18:43:53 +0800 CST

CSS and Bootstrap 4 styles?

  • 772

How can I remove that border around my input and change the background color of B4? I'm using Angular and I use components so I don't have anything like a body to be able to assign the background color to said tag.enter image description here

CSS

.content {
  margin-top: 2em;
  background-color: #fff;
  box-shadow: 0px 10px 18px -2px rgba(0, 0, 0, 0.41);
  border-radius: 30px 30px 30px 30px;
  text-align: center;
}

h3 {
  padding: 10px 10px;
  text-transform: uppercase;
  font-size: 20px;
  border-bottom: 1px solid rgb(75, 168, 255);
}

img {
  border-radius: 100%;
  width: 50%;
  margin-top: 2em;
  margin-bottom: 2em;
}

input {
    text-align: center;
    width: 60%;
    text-decoration: none;
    background-color: rgb(235, 235, 235);
    height: 3em;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #FFF;
}

button {
    margin-top: 1em;
    text-align: center;
    width: 40%;
    text-decoration: none;
    background-color: rgb(75, 168, 255);
    height: 3em;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #FFF;
    color: white;
    text-transform: uppercase;
}

.email {
    margin-bottom: 1em;
}

.min-footer {
    margin-top: 2em;
    background-color: rgb(235, 235, 235);
    padding: 30px 0;
    border-radius: 0px 0px 30px 30px;
    color: rgb(75, 168, 255);
}

HTML

<div class="row">
  <div class="col">
    <div class="content">
      <h3>Sing In</h3>
      <figure>
        <img src="http://lorempixel.com/300/300/people" alt="" />
      </figure>
      <div class="inp">
        <input type="text" class="email" placeholder="login" />
        <br>
        <input type="password" class="pass" placeholder="password" />
        <br>
        <button>Log in</button>
      </div>
      <div class="min-footer">
        <span>Forgot Password?</span>
      </div>
    </div>
    <br />
    <br />
    <br />
  </div>
</div>
css

1 Answers

  1. Best Answer

    You inputare applying an effect called outlineeffects to the border of the text boxes, among which you have:

    • outline-style
    • outline-width
    • outline-color

    So what we must do is set this property to none, which we can do like this:

    .email{
    outline: none;
}

    In the case of background-colorthe canvas of your web page, you must reset these values; Considering that the first file invoked is the Bootstrap 4 CSS styles, then you should do the following:

    From what I see it .content's the class assigned to the divparent that wraps the rest of the elements of your component so it rewrites the background color style for that node:

    .content{
   background-color: otro-color;
}

    So the first style applied there is the Bootstrap style but since it cascades later it is modified because we place it in a personalized way

    • 3