Title: Button selection visual confirmation
Last modified: March 18, 2025

---

# Button selection visual confirmation

 *  Resolved [dev5](https://wordpress.org/support/users/dev5/)
 * (@dev5)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/)
 * Hi,
 * Instead of radio buttons I tried using the button field. Works great and I styled
   them, but there’s no way a user knows they made a selection. The selected and
   unselected buttons appear the same.
 * Is there a method to create a visual indication a button was selected such as
   changing the button color or moving it over and down as if pressed?
   Thanks

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [EDGARROJAS](https://wordpress.org/support/users/edgarrojas/)
 * (@edgarrojas)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371066)
 * Oh there should actually be a different style for selected elements
 * > [SNAG_Program-0000.png](https://imgur.com/ps8gNQA)
 * Is the element not styled for you? did you style the element using custom css?
 *  Thread Starter [dev5](https://wordpress.org/support/users/dev5/)
 * (@dev5)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371138)
 * No – I didn’t use CSS to style it, just the editor.
 *  Thread Starter [dev5](https://wordpress.org/support/users/dev5/)
 * (@dev5)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371145)
 * Where is there a mouseover or selected condition to set in the editor?
 * ![](https://i0.wp.com/ehydrant.com/form.JPG?ssl=1)
    -  This reply was modified 1 year, 2 months ago by [dev5](https://wordpress.org/support/users/dev5/).
 *  Plugin Author [EDGARROJAS](https://wordpress.org/support/users/edgarrojas/)
 * (@edgarrojas)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371189)
 * There is no designer for hover or selected options (i will add this in the todo
   list) but you can style them with css for example this for hover
 * .option_item:hover {
   background-color:red;}
 * and this for selected:
 * .option_item.rnSelected {
   background-color:blue;}
 * Regards!
 *  Thread Starter [dev5](https://wordpress.org/support/users/dev5/)
 * (@dev5)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371203)
 * Thank you. I tried using that CSS but can’t make it work. My CSS is below. Can
   you give me some pointers?
 * .rnField_10 is the buttons
 *     ```wp-block-code
       .rnField_10 .option_item label{font-size:16px !important;line-height:16px !important;color:#000000 !important;font-weight:bold !important;}.rnField_10 .option_item{background-color:#4acf4d !important;border-style:solid !important;border-top-width:2px !important;border-right-width:2px !important;border-bottom-width:2px !important;border-left-width:2px !important;border-color:#0e0e0e !important;border-top-left-radius:6px !important;border-top-right-radius:6px !important;border-bottom-left-radius:6px !important;border-bottom-right-radius:6px !important;}.rnField_10.rnField{margin-top:1px !important;margin-right:1px !important;margin-bottom:12px !important;margin-left:1px !important;}.rnField_10  .buttonselectoritem{min-height:42px !important;}.rnField_2  button,.rnField_2  .RNIconOrImage{color:#000000 !important;}.rnField_2  button{background-color:#4acf4d !important;border-color:#000000 !important;border-top-width:2px !important;border-right-width:2px !important;border-bottom-width:2px !important;border-left-width:2px !important;font-size:16px !important;line-height:16px !important;padding-left:60px !important;padding-right:60px !important;padding-bottom:10px !important;padding-top:10px !important;border-top-left-radius:6px !important;border-top-right-radius:6px !important;border-bottom-left-radius:6px !important;border-bottom-right-radius:6px !important;}.rnField_2  rn-spinner-button{text-align:center !important;}.rntext .rednaoLabel label{font-size:15px !important;line-height:15px !important;}.rnemail .rednaoLabel label{font-size:15px !important;line-height:15px !important;}.rnbuttonselection .rednaoLabel label{font-size:15px !important;line-height:15px !important;}.rncheckbox .rednaoLabel label{font-size:15px !important;line-height:15px !important;}.rnnumeric .rednaoLabel label{font-size:15px !important;line-height:15px !important;}.rnbuttonselection .option_item label{font-size:16px !important;line-height:16px !important;}.rnsubmit_button  button{font-size:16px !important; font-weight: bold !important; line-height:16px !important;}.rnField_21 .rednaoLabel label{font-size:15px !important;line-height:15px !important;}.rnField_18 .rednaoLabel label{color:#cf2323 !important;}.rnField_20 input{}.rnField_20 .rednaoLabel label{color:#cf2323 !important;}.rnField_12 .rednaoLabel label{color:#cf2323 !important;}
       ```
   
 *  Plugin Author [EDGARROJAS](https://wordpress.org/support/users/edgarrojas/)
 * (@edgarrojas)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371369)
 * The styles look fine, Could you send me a link to the form so see the styles 
   applied in a form?
 *  Thread Starter [dev5](https://wordpress.org/support/users/dev5/)
 * (@dev5)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371370)
 * [https://artisticbamboo.com/contact-us/](https://artisticbamboo.com/contact-us/)
   
   It still needs the hover and selected styles which didn’t work for me.
 *  Plugin Author [EDGARROJAS](https://wordpress.org/support/users/edgarrojas/)
 * (@edgarrojas)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371514)
 * I see, try putting the !important keyword to the styles and try again, example:
 * .buttonselectoritem:hover {
   border-color: red !important;}
 *  Thread Starter [dev5](https://wordpress.org/support/users/dev5/)
 * (@dev5)
 * [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371519)
 * That did it – perfect! Thank you for the great support. I thought I had tried
   adding that, but ???
   It’s a very nice form builder. I haven’t used all the features
   yet, but things like conditional are very nice and I hope to keep going deeper.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Button selection visual confirmation’ is closed to new replies.

 * ![](https://ps.w.org/all-in-one-forms/assets/icon-256x256.gif?rev=2935720)
 * [AIO Forms - Craft Complex Forms Easily](https://wordpress.org/plugins/all-in-one-forms/)
 * [Support Threads](https://wordpress.org/support/plugin/all-in-one-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/all-in-one-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/all-in-one-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/all-in-one-forms/reviews/)

## Tags

 * [buttons](https://wordpress.org/support/topic-tag/buttons/)

 * 9 replies
 * 2 participants
 * Last reply from: [dev5](https://wordpress.org/support/users/dev5/)
 * Last activity: [1 year, 2 months ago](https://wordpress.org/support/topic/button-selection-visual-confirmation/#post-18371519)
 * Status: resolved