Ability to configure the lookup icon Visible OR Hidden in View OR Edit mode separately on a FORM

@mperrott We use some custom.css to only show the Lookup controls in Read mode when hovering over a specific field, instead of always. 

Don't know exactly why each of these lines was necessary, but this is the code we use related to Lookups:

@media (hover: hover) {
/* Hide Dropdown and X icon in Form fields on hover*/
    .form-field .has-lookup .autocomplete-popup-indicator, .form-field .has-lookup .MuiAutocomplete-clearIndicator {
        display: none
    }
    /*Exemptions for pop-ups since HTML is build up different and is cause the pop-up box to change size while hovering */
    .popup__content .form-field .has-lookup .autocomplete-popup-indicator, .form-field .has-lookup .MuiAutocomplete-clearIndicator {
        display: block
    }
    .form-field:hover .has-lookup .autocomplete-popup-indicator, .form-field:hover .has-lookup .MuiAutocomplete-clearIndicator {
        display: block;
    }
    /* Hide Dropdown and X icon in Form fields when active*/
    .form-field .has-lookup .Mui-focused.Mui-focused .autocomplete-popup-indicator, .form-field .has-lookup .Mui-focused.Mui-focused .MuiAutocomplete-clearIndicator {
        display: block;
    }

    /* Hide look-up while not hovering in read mode */
    .form-field .lookup-popup-button {
        display: none;
    }
    .form-field:hover .lookup-popup-button {
        display: block;
    }
    .form-field .edit-mode .lookup-popup-button {
        display: block;
    } 
}

Would this serve your needs?

@media (hover: hover) {
/* Hide Dropdown and X icon in Form fields on hover*/
    .form-field .has-lookup .autocomplete-popup-indicator, .form-field .has-lookup .MuiAutocomplete-clearIndicator {
        display: none
    }
    /*Exemptions for pop-ups since HTML is build up different and is cause the pop-up box to change size while hovering */
    .popup__content .form-field .has-lookup .autocomplete-popup-indicator, .form-field .has-lookup .MuiAutocomplete-clearIndicator {
        display: block
    }
    .form-field:hover .has-lookup .autocomplete-popup-indicator, .form-field:hover .has-lookup .MuiAutocomplete-clearIndicator {
        display: block;
    }
    /* Hide Dropdown and X icon in Form fields when active*/
    .form-field .has-lookup .Mui-focused.Mui-focused .autocomplete-popup-indicator, .form-field .has-lookup .Mui-focused.Mui-focused .MuiAutocomplete-clearIndicator {
        display: block;
    }

    /* Hide look-up while not hovering in read mode */
    .form-field .lookup-popup-button {
        display: none;
    }
    .form-field:hover .lookup-popup-button {
        display: block;
    }
    .form-field .edit-mode .lookup-popup-button {
        display: block;
    } 
}

@Arie V , I raised this and afterwards we got the above or similar recommendation from Thinkwise to overcome this issue. 

Not sure this idea is valid anymore as above serves this purpose. @Jeroen van den Belt  maybe this idea can be closed with the custom.css solution that was provided as implemented.

@mperrott, all right, I will then close this idea. I will leave it open for comments, should there be a case in which the provided solution would not suffice.

Hi @Jeroen van den Belt,

For now I do not think any other scenario that we are not covered with the above. Keep comments open just in case we find something new.

Thanks

@Jeroen van den Belt maybe Thinkwise can gather all these handy CSS snippets for easier reference. I am pretty sure you guys already have a nice collection.

@Freddy Quite some are mentioned here in and below the blog: 

• Customizing the Universal GUI using CSS Blog