Changing the Cursor on Custom Buttons

asked on May 27, 2020

Has anyone has luck changing the cursor on a custom button?

Forms Version: 10.4.1.164

I am using a custom HTML field and creating buttons within a table that will open documents in WebLink or another form.

Code in the HTML field

Code in the CSS tab

.button {
border: double;
padding: 4px 4px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px
margin: 2px 2px;
cursor: move;
}

I have tried multiple cursor types and no matter what I have in the code, it goes to the default of pointer.

Any help is much appreciated. Thanks.

0 0

SELECTED ANSWER

replied on May 27, 2020

Hi Jennifer,

It looks like the built-in styling is just overriding your customization. Either you can fight with the selectors and try to make your specificity high enough to override the defaults, or you could just go with the "nuclear option" and use !important to force it to override.

For example,

.button {
  cursor: move !important;
}

On related note, if you use button elements instead of input buttons, it is much easier to override the default styling and you get more customization options (i.e., the CSS you have should work as-is).

<button type="button" class="button button1" onclick="window.open('insertlink')">Begin Assessment</button>

Just make sure you have the type="button" part otherwise you'll get unexpected behavior.

2 0

replied on May 28, 2020

Thanks so much Jason, changing my html to button instead of input buttons worked great. I was trying to piece together some coding I found on the internet.

0 0

Question

Question

Changing the Cursor on Custom Buttons

Answer

Replies

Sign in to reply to this post.