Change selecting color in a textfield [HTML5]

Help
#1

How to change selecting color in a textfield? It’s always black. But I have a black background and the selection is not visible.

#2

Hi there!

Unfortunately AS3 and so OpenFL doesn’t offer a way to change the highlight color of a
standard TextField.
There’s hope though. I’ve ‘Haxified’ some old AS3 code:

package;

import openfl.display.Sprite;
import openfl.Lib;
import openfl.text.TextField;
import openfl.text.TextFieldType;
import openfl.geom.ColorTransform;

class Main extends Sprite 
{
    public function new() 
    {
        super();
        var inp:CustomTextField = new CustomTextField();
        inp.type = TextFieldType.INPUT;
        inp.text = "This is a textfield!";
        inp.textColor = 0xffffff;
        inp.highlightColor = 0xffffff;
        addChild(inp);
    }
}

class CustomTextField extends TextField
{
    @:isVar public var highlightColor(get, set):UInt;
	
    public function new() 
    {
        super();
    }    
    
    public function get_highlightColor():UInt
    {
        return highlightColor;
    }
    
    public function set_highlightColor(color:UInt)
    {
        this.backgroundColor = invert( this.backgroundColor );
        this.textColor = invert( this.textColor );
        var colorTrans:ColorTransform = new ColorTransform();
        colorTrans.color = color;
        colorTrans.redMultiplier = -1;
        colorTrans.greenMultiplier = -1;
        colorTrans.blueMultiplier = -1;
        this.transform.colorTransform = colorTrans;
        return highlightColor;
    }
    
    private static function invert( color:UInt ):UInt
    {
        var colorTrans:ColorTransform = new ColorTransform();
        colorTrans.color = color;
        return invertColorTransform( colorTrans ).color;
    }
    
    private static function invertColorTransform( colorTrans:ColorTransform ):ColorTransform
    {
        colorTrans.redMultiplier = -colorTrans.redMultiplier;
        colorTrans.greenMultiplier = -colorTrans.greenMultiplier;
        colorTrans.blueMultiplier = -colorTrans.blueMultiplier;
        colorTrans.redOffset = 255 - colorTrans.redOffset;
        colorTrans.greenOffset = 255 - colorTrans.greenOffset;
        colorTrans.blueOffset = 255 - colorTrans.blueOffset;
        return colorTrans;
    }
}
1 Like
#3

There is the line in CanvasTextField.hx (openfl\_internal\renderer\canvas) that change the color

if (start != null && end != null) {
context.fillStyle = "#000000";
...
}