My CSS skills are pretty limited, and despite my efforts to find a solution to my problem, I've come up short. I'm trying to tweak a CSS stylesheet to customize an advanced search form tied to a database. Unfortunately, I can't make any changes to the HTML code, and JavaScript or JQuery are not options for me either.
The search form allows users to choose which fields they want to search from a dropdown menu. I specifically want to hide certain field options that don't contain any data. Here's a snippet of the relevant HTML:
<div class="inputs"><div class="search-entry">
<select name="advanced[0][element_id]"
id="advanced-0-element_id">
<option value="" label="Select Below ">Select Below </option>
<optgroup label="Dublin Core">
<option value="88" label="Abstract">Abstract</option>
<option value="98" label="Access Rights">Access Rights</option>
<option value="118" label="Accrual Method">Accrual Method</option>
<option value="119" label="Accrual Periodicity">Accrual Periodicity</option>
<option value="120" label="Accrual Policy">Accrual Policy</option>
I attempted to use the following CSS code:
option [value="88"] {
display: none;}
However, this approach doesn't work because each dropdown option doesn't create a block in the first place. Therefore, applying display: none won't hide a non-existent block.
Now that you know what doesn't work, do you have any suggestions on how I can achieve this? Remember, I can't access the HTML code as it's generated by a PHP program on an inaccessible server, and I have no knowledge of PHP.
Thank you for your help!