Modifying style of cc.EditBox component

Modifying style of cc.EditBox component
0.0 0

#1

I love the usability of the EditBox, does what I needed, but the text in the box is all the way to the left, touching the side of the box with 0 padding. It looks odd, and I found no properties to edit the padding inside it. You can’t even see the blinking cursor when it’s empty and focused. Found a way in the regular Cocos editbox to do this:
this.usernameBox.style.paddingLeft = “7px”;
However, there’s no style option in the cc.EditBox component, and I hope there’s something I’m missing, or a workaround since my team is complaining about it. Also a border would be nice, or just css style properties if possible. Pretty sure this would be a question for @owen to know.
Also, seconding that request for setting a tab stop number to switch text fields. For example, you’re in the Username box and you naturally want to press Tab to go to the password, and I can’t see an easy way. Thanks, and great work guys, CC is starting to mature nicely.


#2

padding and alignment seems really matters, I will consider to add it in the future release, but now I have another high priority work needed to be done, like rich text support.

I will improve the padding and make them the same across all the supported platforms, thanks.


#3

@owen How do we modify the font of the editbox in Cocos Creator? I can’t seem to find that!


#4

Currently the font customize is not supported…


#6

Hi @owen
Any update on how to use fonts in an edit box.
If I could get a work around method, that would be great.
Thank you.


#7

CustomEditBoxWithFont.zip (15.2 KB)

Fonts in edit box now works for me.
Came up with a solution for using Fonts in Edit box.
I have attached the scripts for it.