Closed Bug 229886 Opened 21 years ago Closed 21 years ago

CSS 2.1 dynamic pseudo-classes are not supported for <select> boxes

Tracking

()

Status:

VERIFIED DUPLICATE of bug 163503

People

(Reporter: suomi, Assigned: dbaron)

Details

Suomi Hasler, Ayni AG

Reporter

Description

•

21 years ago

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031007
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031007

CSS 2.1 dynamic pseudo-classes :hover, :active are not supported correctly on
select-boxes.
the select-box, when single clicked on the down-arrow, unfolds shortly, but
instantly claps back. only if you double-click into the text area (as opposed to
the down-arrow) the select-box unfolds so that you can do a choice. 

this stems from the CSS settings, because, if in the CSS sheet, you uncomment
the specifications for "select", then everything works fine (i.e. as documented)

Reproducible: Always

Steps to Reproduce:
1. load the attached index.xhtml
2. take care, that it uses the attached formate.css
3. on the displayed page click the down arrow of a select box.
4. the select box unfolds quickly, but then disappears again.
5. double-click into the text field of a select-box.
6. the select box unfolds and stays unfolded as documented
7. to cross-check: uncomment the select specs in the css file (i.e put a /* in
front and */ at the back of them)
8. redo the above tests and everything works fine.


Actual Results:  
a select-box with CSS 2.1 dynamic pseudo-class specs for :hover and :focus does
not unfold as documented (i.e. when single-clicked on the down-arrow)

Expected Results:  
unfold the select-box and let it unfolded when single clicked on the down arrow
of the select-box 

the index.xhtml:

<?xml version="1.0" encoding="unicode"?>
<?xml-stylesheet type="text/css" href="formate.css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/Javascript" />
<link rel="stylesheet" href="formate.css" type="text/css" />
<title>address Advanced Search Parameters</title>

<script type="text/javascript">
//<![CDATA[

function ReadCookie(cookieName) {
        var theCookie=""+document.cookie;
        var ind=theCookie.indexOf(cookieName);
        if (ind==-1 || cookieName=="") return "";
        var ind1=theCookie.indexOf(';',ind);
        if (ind1==-1) ind1=theCookie.length;
        return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}

function checkEmpty() {
        document.auth.maxitaxi.value = "search"
        document.auth.submit()
}

function create_mailolisto() {
        document.auth.maxitaxi.value = "mailolisto"
        document.auth.submit()
}

function check_LDAP() {
        document.auth.maxitaxi.value = "checkLDAP"
        document.auth.submit()
}

function newEntry() {
        document.auth.maxitaxi.value = "newEntry"
        document.auth.submit()
}

function clearEntryFields() {
        for (var i =0; i < document.auth.elements.length; i++) {
                if (document.auth.elements[i].type == "text")
document.auth.elements[i].value = ""
        }
}

function clearCompFields() {
        for (var i =0; i < document.auth.elements.length; i++) {
                if (document.auth.elements[i].type == "select-one")
document.auth.elements[i].selectedIndex = 0
        }
        for (var i = 0; i < document.auth.limit10.length; i++) {
                if (document.auth.limit10[i].value == "limit100") {
                        document.auth.limit10[i].checked = 1
                        break
                }
        }
}

function suomoHelp() {
        var w = window.open("/help/help_searchadvanced.html", "searchWindow")
        w.focus()
}

function setK() {
        var bgc = ReadCookie("bgcolor")
        if (bgc != "") document.bgColor = bgc
}

//]]>
</script>
</head>

<body onload="setK()">


<form name="auth" action="searchosearch.php" method="post"
target="addressResultWindow">

<table id="titcol" summary="page-title">

<tr>
<th colspan="2" rowspan="1">
<h3>Advanced Search Criteria</h3></th>
</tr>

</table>
<a name="top"></a>
<table summary="top-control-buttons">
<tr>

<td class="n"><input type="button" value="close" onClick="window.close()" />
<input type="button" value="toButtom" onClick="window.location='#down'" /></td>
<td  class="nr"><input type="button" value="help" onClick="suomoHelp()" /></td>
</tr><tr>
<td class="n"><input type="reset" value="reset" />
<input type="button" value="clearEntries" onClick="clearEntryFields()" />
<input type="button" value="resetComparisons" onClick="clearCompFields()" /></td>
<td  class="nr"><input type="submit" value="search" onClick="checkEmpty()" /></td>
<input type="hidden" name="__pagemadeby" value="cgi/search_advanced.php" />
<input type="hidden" name="maxitaxi" />
</tr>
</table>
<table summary="page-content">
<tr>
        <th>date_last_action<br />(date)<br /><input type="checkbox"
name="attr[date_last_action]"   /></th>

        <th>date_next_action<br />(date)<br /><input type="checkbox"
name="attr[date_next_action]"   /></th>
        <th>name<br />(blob)<br /><input type="checkbox" name="attr[name]" 
checked="1" /></th>
        <th>givenname<br />(blob)<br /><input type="checkbox"
name="attr[givenname]"  checked="1" /></th>
        </tr>
        <tr>
                <td class="c"><select size ="1" name="opt[date_last_action]">

                        <option>EXACTLY AT</option>
                        <option>BEFORE</option>
                        <option>AFTER</option>
                        <option>BETWEEN DATE</option>
                        <option>IS ZERO</option>
                        <option>IS NOTZERO</option>

                        <option>IS NULL</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[date_next_action]">
                        <option>EXACTLY AT</option>
                        <option>BEFORE</option>
                        <option>AFTER</option>
                        <option>BETWEEN DATE</option>

                        <option>IS ZERO</option>
                        <option>IS NOTZERO</option>
                        <option>IS NULL</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[name]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>

                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>

                        <option>GROUP BY</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[givenname]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>

                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>

</tr>
        <tr>
                <td class="c"><input type="text" name="crit[date_last_action]"
value="" /></td>
                <td class="c"><input type="text" name="crit[date_next_action]"
value="" /></td>
                <td class="c"><input type="text" name="crit[name]" value="" /></td>
                <td class="c"><input type="text" name="crit[givenname]" value=""
/></td>
        </tr>
<tr>
        <th>phone<br />(blob)<br /><input type="checkbox" name="attr[phone]" 
checked="1" /></th>

        <th>mail<br />(blob)<br /><input type="checkbox" name="attr[mail]"   /></th>
        <th>action<br />(blob)<br /><input type="checkbox" name="attr[action]" 
checked="1" /></th>
        <th>comment<br />(blob)<br /><input type="checkbox" name="attr[comment]"
 checked="1" /></th>
        </tr>
        <tr>
                <td class="c"><select size ="1" name="opt[phone]">

                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>

                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[mail]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>

                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>

                        <option>GROUP BY</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[action]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>

                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>

                <td class="c"><select size ="1" name="opt[comment]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>

                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>
</tr>
        <tr>

                <td class="c"><input type="text" name="crit[phone]" value="" /></td>
                <td class="c"><input type="text" name="crit[mail]" value="" /></td>
                <td class="c"><input type="text" name="crit[action]" value=""
/></td>
                <td class="c"><input type="text" name="crit[comment]" value=""
/></td>
        </tr>
<tr>
        <th>address<br />(blob)<br /><input type="checkbox" name="attr[address]"
 checked="1" /></th>
        <th>businesscategory<br />(blob)<br /><input type="checkbox"
name="attr[businesscategory]"  checked="1" /></th>

        <th>url<br />(blob)<br /><input type="checkbox" name="attr[url]"   /></th>
        <th>addon<br />(blob)<br /><input type="checkbox" name="attr[addon]"  
/></th>
        </tr>
        <tr>
                <td class="c"><select size ="1" name="opt[address]">
                        <option>IS LIKE</option>

                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>

                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[businesscategory]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>

                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>

                </select></td>
                <td class="c"><select size ="1" name="opt[url]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>

                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[addon]">
                        <option>IS LIKE</option>

                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>

                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>
</tr>
        <tr>
                <td class="c"><input type="text" name="crit[address]" value=""
/></td>
                <td class="c"><input type="text" name="crit[businesscategory]"
value="" /></td>
                <td class="c"><input type="text" name="crit[url]" value="" /></td>

                <td class="c"><input type="text" name="crit[addon]" value="" /></td>
        </tr>
<tr>
        <th>title<br />(blob)<br /><input type="checkbox" name="attr[title]"  
/></th>
        <th>history<br />(blob)<br /><input type="checkbox" name="attr[history]"
  /></th>
        <th>remarks<br />(blob)<br /><input type="checkbox" name="attr[remarks]"
  /></th>

        <th>counter<br />(int)<br /></th>
        </tr>
        <tr>
                <td class="c"><select size ="1" name="opt[title]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>

                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>

                </select></td>
                <td class="c"><select size ="1" name="opt[history]">
                        <option>IS LIKE</option>
                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>

                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>
                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[remarks]">
                        <option>IS LIKE</option>

                        <option>IS EXACTLY</option>
                        <option>IS NULL</option>
                        <option>IS NOTNULL</option>
                        <option>IS EMPTY</option>
                        <option>IS NOTEMPTY</option>
                        <option>DOES NOT CONTAIN</option>

                        <option>IS UNIQUE</option>
                        <option>GROUP BY</option>
                </select></td>
                <td class="c"><select size ="1" name="opt[counter]">
                        <option>EQUAL TO</option>
                        <option>GT THAN</option>
                        <option>LT THAN</option>

                        <option>LE THAN</option>
                        <option>GE THAN</option>
                        <option>BETWEEN</option>
                </select></td>
</tr>
        <tr>
                <td class="c"><input type="text" name="crit[title]" value="" /></td>
                <td class="c"><input type="text" name="crit[history]" value=""
/></td>

                <td class="c"><input type="text" name="crit[remarks]" value=""
/></td>
                <td class="c"><input type="text" name="crit[counter]" value=""
/></td>
        </tr>
</table>
<br />


<table summary="bottom-control-buttons">
<tr><td class="n">Today:</td><td class="n">2004-01-02</td><td
class="n">&nbsp;</td><td class="n"><input type="radio" name="limit10"
value="limit10" />Limit 10</td>
<td class="n">&nbsp;</td><td class="n">Order By<select name="orderx" size="1">

<option>counter</option>
<option>action</option>
<option>addon</option>
<option>address</option>
<option>businesscategory</option>
<option>comment</option>
<option>date_last_action</option>
<option>date_next_action</option>
<option>givenname</option>

<option>history</option>
<option>mail</option>
<option>name</option>
<option>phone</option>
<option>remarks</option>
<option>title</option>
<option>url</option>
</select>
</td></tr>
<tr><td class="n">Tomorrow:</td><td class="n">2004-01-03</td>

<td class="n">&nbsp;</td><td class="n"><input type="radio" name="limit10"
value="limit100" checked="1" />Limit 100</td></tr>
<tr><td class="n">Yesterday:</td><td class="n">2004-01-01</td>
<td class="n">&nbsp;</td><td class="n"><input type="radio" name="limit10"
value="nolimit" />No Limit</td></tr>
</table>
<br />
<table summary="buttom-control-buttons">
<tr>
<td class="n"><input type="reset" value="reset" />
<input type="button" value="clearEntries" onClick="clearEntryFields()" />
<input type="button" value="resetComparisons" onClick="clearCompFields()" /></td>
<td class="nr"><input type="button" value="search" onClick="checkEmpty()" /></td>
</tr>
</table>

<input type="button" value="close" onClick="window.close()" />
<input type="button" value="toTop" onClick="window.location='#top'" />
</form>

<a name="down"></a>
</body>
</html>














the formate.css:

@charset "ISO-8859-1";
/* body background color default: #00eedd */
body    { color: black; background: #00eedd ;
         font-family:Arial, Helvetica, sans-serif; }

h1{  font-size:12pt; font-weight:bold; color:#000000;}
h2  {  font-size:11pt; font-weight:bold;}
h2 { color: #000000}

a:link { color:#0000FF;text-decoration:none }
a:visited { color:#FF0000;text-decoration:none }
a:active { color:#0000FF}

input:link { color:black; }
input:visited { color:blue;text-decoration:none }
input:hover { color:red;text-decoration:none }
input:active { color:green }

textarea:link { color:black; }
textarea:visited { color:blue;text-decoration:none }
textarea:hover { color:red; text-decoration:none }
textarea:active { color:green }

select:hover { color:red;text-decoration:none }
select:active { color:green }

p { font-size:10pt; color:#000000; }

ul { font-size:10pt; color:#000000; }

li { font-size:10pt; color:#000000; }
b   { font-size:10pt; font-weight:bold; color:#000000; }
i {  font-size:10pt; color:#000000; }

/* color for invalid mail addresses */
#mycol { color: red }

/* tables */

/* title table  default color #D3D6D6 */
#titcol { background: #D3D6D6 ; width: 100% ;
        border-collapse: collapse ;
        border: 2px ridge white ; }
/* general tables */
table { border-collapse: collapse ; width: 100% ;
} /* piccolo tables */
table.p { border-collapse: collapse ; width: 50% ; }
/* general table cells */
td { border: 2px ridge white ; }
td.v { border: 2px ridge white ; vertical-align: top; }
td.w155 { border: 2px ridge white ; width: 155px ; }
td.n { border: none ; }
td.nr { border: none ; text-align: right; }
td.c { border: 2px ridge white;  text-align: center; }
td.nt { border-top: none ;  text-align: center; }
td.nb { border-buttom: none ;  text-align: center; }
td.ntb { border-top border-buttom: none ;  text-align: center; }
th { border: 2px ridge white ; }

Anne (:annevk)

Comment 1

•

21 years ago

Could you attach a _simple_ test case?

Whiteboard: DUPEME

Isaac Hwak Han

Comment 2

•

21 years ago

WFM. (WinXP Gecko/20040102)

Oliver Klee

Comment 3

•

21 years ago

Oh, and please attach the simple testcase as an attachment ... don't post it as
a comment. Thanks! =:-)

Alfonso Martinez

Comment 4

•

21 years ago


*** This bug has been marked as a duplicate of 163503 ***

Status: UNCONFIRMED → RESOLVED

Closed: 21 years ago

Resolution: --- → DUPLICATE

:Gavin Sharp [email: gavin@gavinsharp.com]

Updated

•

20 years ago

Status: RESOLVED → VERIFIED

Whiteboard: DUPEME

You need to log in before you can comment on or make changes to this bug.

Bugzilla

Quick Search

CSS 2.1 dynamic pseudo-classes are not supported for <select> boxes

Categories

(Core :: CSS Parsing and Computation, defect)

Tracking

()

People

(Reporter: suomi, Assigned: dbaron)

References

Details

Crash Data

Security

(public)

User Story

Description

Comment 1

Comment 2

Comment 3

Comment 4

Updated