Reputation: 87
I have created a custom component, that text box has a pen icon on left(because leftbutton wont support in HTML5/WEB). Here is my code snippet
var bg = Ti.UI.createView({
height : app.platform.isAndroid ? 35 : 31,
top : 50,
width:"94%",
backgroundColor : "white",
layout:"horizontal"
});
var leftBtnWeb = Ti.UI.createButton({
backgroundImage : app.dir + "img/icons/pen.png",
width : 25,
top : 8,
height : 16,
touchEnabled : false,
});
bg.add(leftBtnWeb);
input = Ti.UI.createTextField({
// top : 5,
width:'88%',
// left : 2,
// right : 20,
height : 25,
font : {
fontSize : "16dp"
},
autocorrect : false,
returnKeyType : Ti.UI.RETURNKEY_DONE,
clearButtonMode : Ti.UI.INPUT_BUTTONMODE_ALWAYS,
hintText:"test",
backgroundColor:'transparent',
zIndex : 10,
borderColor : "transparent",
backgroundSelectedColor : "transparent",
backgroundFocusedColor : "transparent",
backgroundImage : "transparent",
focusedColor : "transparent",
borderStyle : Ti.UI.INPUT_BORDERSTYLE_NONE
});
bg.add(input);`
when I get focus on textfield, I got blue border, can any one let me know how to remove that border when focused.
Thanks in Advance, Swathi.
Upvotes: 0
Views: 698
Reputation: 2113
My first idea would be to attach a custom focus event listener to your textfield and set the color of your border again.
input.addEventListener('focus', function() {
borderStyle : Ti.UI.INPUT_BORDERSTYLE_NONE
this.hasFocus = true;
});
Another thing you could try is setting your backgroundColor to transparent like this:
backgroundColor : 'transparent'
Upvotes: 2