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

How do I remove the border outline of a text area in HTML?

There is a blue outline around the outside of this textarea and I have already tried to do outline:none; in css.

here the code:

#floatingTextarea {
  border: none;
  outline: none;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="form-floating container-fluid h-100 w-100">
  <textarea class="form-control text-center align-center" id="floatingTextarea" style="height:100vh;background-color:#dddddd;"></textarea>
  <label for="align-center" class="text-center"></label>`

this is the blue outline

I just want it to go away. I have looked at other posts about the same problem but I still cant seem to find an answer that works.

Tags:

2

Answers


  1. 0

    It’s hard to say without knowing your actual code file.If possible please share it through codepen.
    Till then I will share the solutions that worked for me which is :

    #floatingTextarea {
  border: none;
  box-shadow: none;
}

    OR

    #floatingTextarea {
  border: none;
  outline: none !important;
}
    Login or Signup to reply.
  2. 0

    Use your inspector to check weather outline: none; border: none; is applied to the element, make sure that the properties is no being stricken out. This may happens due to multiple reason

    • when the css rule is written multiple times that is the css rule which is declared at top will be over written by the css rule with same written at the bottom

    • when !important is used then the property-values without !important will be overwritten

    • when multiple classes are used then the properties of first class will be overwritten by the latest class

    The immediate solution for your problem is to use :

    #floatingTextarea { border: none !important; outline: none !important; }

    Note that using !important should generally be avoided unless absolutely necessary because it is hard to maintain the code and debug it.

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

Back To Top
Search