"Blue box" showing up next to custom UIButton in iOS app

Question

I'm developing an iPhone app that acts as a remote for switching lightbulbs on and off, and I'm using UIButtons to do this:

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchDown];

[button setBackgroundImage:bulb_on forState:UIControlStateSelected];
[button setBackgroundImage:bulb_off forState:UIControlStateNormal];

button.frame = CGRectMake(SPACING_LEFT + (BUTTON_SPACING * buttonNum) % (NUMBER_OF_HORIZONTAL_BUTTONS * BUTTON_SPACING), SPACING_TOP + y_padding, BUTTON_SIZE_X, BUTTON_SIZE_Y);

[self.scrollView addSubview:button];

Everything works fine, except a little, but still annoying detail:

As you can see, there is some kind of blue "box" or shadow in the top left corner of the selected button. The button in normal state has no such thing. What can this come from, and how to remove it?

Answer 1

I think it s because you created a UIButtonTypeRoundedRect not a buttonWithType:UIButtonTypeCustom

Do it like this:

UIButton *button = [[UIButton alloc]initWithFrame: CGRectMake(SPACING_LEFT + (BUTTON_SPACING * buttonNum) % (NUMBER_OF_HORIZONTAL_BUTTONS * BUTTON_SPACING), SPACING_TOP + y_padding, BUTTON_SIZE_X, BUTTON_SIZE_Y)];
[button addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchDown];

[button setBackgroundImage:bulb_on forState:UIControlStateSelected];
[button setBackgroundImage:bulb_off forState:UIControlStateNormal];

[self.scrollView addSubview:button];

Answer 2

By default button type is System, Change type of your button to Custom.

---

Code to fix:

[UIButton buttonWithType:UIButtonTypeCustom];

---

Storyboard to fix:

Refer screenshot to fix in stroryboard.

Answer 3

Try this in programmatically [UIButton buttonWithType:UIButtonTypeCustom];