How to Change Border Color of Textarea on: Focus

How to change border color of textarea on :focus

.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
  }

How to change border color of input/textarea on :focus?

After I went through some styling in React documentation it seems that the best option to solve this issue is using Radium.

How to change border color when focus on a nativebase TextArea Component on focus?

I'm not too familiar with codebase but I assume that the _focus prop is the same as onFocus for the Input component in react-native.

Here is an example how to the onFocus:

<Input
   ...
   onFocus={() => {
     updateBorderColor({ borderColor: 'white' });
   }}
/>

Maybe try to follow the same logic for the _focus?

Can't change border color when input field is active

So this is a few things, your css isn't valid, you've written scss syntax. If you're aware of this and the question is meant to say "scss", then you need to add outline: none;. Also #black isn't a valid colour.

Example in scss:

input {
    margin-top: 20px;
    border-radius: 0px;
    background-color: #FFFFFF;
    border: 1px solid black;
    height: 33px;
    width: 200px;

    &:active, &:focus { // I think you said you wanted focus as well
      font-size: 13px;
      border: 2px solid red;
      outline: none; // add this
      background-color: #ffffff;
    }

    &:disabled {
      border: 1px solid black; // update this
      border-radius: 0px;
      background-color: #F9FAFB;
    }
}

In css:

input:active, input:focus { // I think you said you wanted focus as well
      font-size: 13px;
      border: 2px solid red;
      outline: none; // add this
      background-color: #ffffff;
    }

• You can't use the & in regular css.
• #Black isn't a css colour value.
• You need outline: none to override the browser's default focus behaviour.

How to change border color on focus?

Try this:

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

---

When the element is focussed, the User Agent (browser) by default sets an outline. So, to prevent it, you need to override it as shown above

Textarea border color not changing completely

Use border-style:solid; This will stop the border from being the two different colours.

JSFiddle

Thanks to some messing around (and Paulie_D in comments [Thanks!]) I found out it's because of the inset border style.

You can also use shorthand border which then means you have less lines in your css.

border:1px solid #f00;

Here's a working snippet:

.fill-form-font{            padding: 8px;    border-radius: 20px;    border-color: red;    border-style:solid;    outline: none;    font-size: 16px;}

<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font" ><textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>

How to change Flutter TextField border color on focus?

Add focusBorder insted of enabledBorder

TextFormField(
        decoration: InputDecoration(
          labelText: "Resevior Name",
          fillColor: Colors.white,
          focusedBorder:OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.white, width: 2.0),
            borderRadius: BorderRadius.circular(25.0),
          ),
        ),
      )

How to change border color on focus using styled-components

You need to disable outline for that:

const StringInput = styled.input`
  border: 1px solid black;
  &:focus {
    outline: none;
    border-color: red;
  }
`;

const App = () => {
  return <StringInput />;
};

Change border color of TextField while focused

NativeScript doesn't support any pseudo-selector while text field is focused. But you could simply listen to focus and blur events, add / remove a class for changing border color.

Since you are using Angular, a simple directive could solve this problem once in for all TextFields in your app.

HTML

<ScrollView class="page">
    <StackLayout class="form">
        <TextField appHighlightBorder class="m-10 input input-border"
            hint="First Name"></TextField>
        <TextField appHighlightBorder class="m-b-10 m-x-10 input input-border"
            hint="Last Name"></TextField>
        <TextField appHighlightBorder class="m-b-10 m-x-10 input input-border"
            hint="Email"></TextField>
    </StackLayout>
</ScrollView>

CSS

.form .input-border.focus {
    border-color: red;
}

Directive

import { Directive, ElementRef, OnDestroy, Renderer2 } from '@angular/core';

import { TextField } from 'tns-core-modules/ui/text-field';

@Directive({
    selector: '[appHighlightBorder]'
})
export class HighlightDirective implements OnDestroy {

    private removeFocusEvent: () => void;
    private removeBlurEvent: () => void;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) {
        this.removeFocusEvent = this.renderer.listen(elementRef.nativeElement, TextField.focusEvent, () => {
            renderer.addClass(elementRef.nativeElement, 'focus');
        });
        this.removeBlurEvent = this.renderer.listen(elementRef.nativeElement, TextField.blurEvent, () => {
            renderer.removeClass(elementRef.nativeElement, 'focus');
        });
    }

    ngOnDestroy() {
        this.removeFocusEvent();
        this.removeBlurEvent();
    }
}

Playground Sample

---

Related Topics