1

UNwanted blue border

I have the following css for textarea 

textarea {
    background: transparent;
    display: inline;
    resize: none;
    margin-top: 1%;
    min-width: 100px;
    height: 38px;
    border: none;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    border-radius: 50px;
    box-shadow: 0 0 1pt 1pt #8F4A11;
}

As you can see from the image, when I click on the text area, a blue border appears around the box. I'd like to remove the blue borde. Could I request guidance please?

User12345
  • 325
  • 1
  • 7
  • 20
  • Related duplicates - [Here](http://stackoverflow.com/q/8622686/2930477) and [here](http://stackoverflow.com/q/17109702/2930477)... and [another one here](http://stackoverflow.com/q/16156594/2930477)... Just make sure that when the input/textarea is in focus there is an obvious indicator, using `textarea:focus,input:focus { /*properties*/}` – misterManSam Sep 11 '15 at 00:43
  • @misterManSam I would have to disagree. All of the links focus on `box-shadow` while we cannot touch the `box-shadow` property here since it is part of the original style. – asdf Sep 11 '15 at 00:47
  • @asdf - The blue border pictured in the question is from Chrome and is removed with `outline: none` on focus. This is covered in other questions and [here is my example](https://jsbin.com/lumafo/edit?html,css,output) using the CSS above and removing the outline whilst adding a different color box shadow on focus. This is not a new question. – misterManSam Sep 11 '15 at 00:51
  • Thank you. Those examples come in handy in other places for me. Thank you again. – User12345 Sep 11 '15 at 01:36

1 Answers1

2

Add a textarea:focus element to your styles and remove the border and outline properties:

CSS

textarea:focus {
    border: none;
    outline: none;
}

Here's a jsfiddle demonstrating

asdf
  • 2,927
  • 2
  • 21
  • 42
  • Hello asdf - Is it possible to get the box shadow to have a radius to curve along the same border as the textbox? – User12345 Sep 11 '15 at 00:34