Menu
Community /Pin to ProfileBookmarkCan I add
@cootheadJun 26.2020 — #
That may well work in Chrome but it certainly does not work in Firefox.
My original answer should have read...
[b]It is not possible with any cross browser reliability[/b].
I thought, though, that you might have suggested an alternative
approach to the problem, as you discussed here...
[url=https://forums.cutcodedown.com/index.php?topic=67.0]**[color=#069][u]Alternate select submission[/u][/color] **[/url]
[i]coothead[/i]@cootheadJun 27.2020 — #
>
Well it certainly does not work in my Firefox 77.0.1(64bit) browser. :D
_coothead_@cootheadJun 29.2020 — #Hi there shobha,
as the`` cannot be
styled with any cross-browser reliability it would
be prudent to look for alternative methods.
Here is just one example...
[i]coothead[/i]
Can I add tag in options for select elements?
I want to add html tags in options. For example:
`<select>
<option value=”one”><b>testing 1</b></option>
<option value=”two”> <span style=”color:red;”>testing2</span></option>
</select>
Is it possible?
Sign in
to post a comment10 Comments(s) ↴
0
@cootheadJun 26.2020 — #>@JMRKER#1619956
> **[color=#069]....but could achieve the desired results with:[/color] **
That may well work in Chrome but it certainly does not work in Firefox.
My original answer should have read...
[b]It is not possible with any cross browser reliability[/b].
I thought, though, that you might have suggested an alternative
approach to the problem, as you discussed here...
[i]coothead[/i]
0
@cootheadJun 27.2020 — #>@JMRKER#1620005
> **[color=#069]I tested with FF and it worked with the version I'm using.[/color] **
>
Well it certainly does not work in my Firefox 77.0.1(64bit) browser. :D
_coothead_
0
@cootheadJun 29.2020 — #Hi there shobha,as the
select and option elements``styled with any cross-browser reliability it would
be prudent to look for alternative methods.
Here is just one example...
<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.6em sans-serif;
}
form {
max-width: 30em;
margin: auto;
}
#field1 {
position: relative;
margin-bottom: 0.5em;
border: 1px solid #999;
background-color: #eef;
}
#field1 legend {
padding: 0;
border: 1px solid #999;
border-radius: 0.4em;
background-color: #fff;
}
#field1 legend label{
padding-right: 1em;
margin: 0;
border: 0;
}
#field1 input {
position:absolute;
opacity:0;
top: 1em;
left:1em;
}
#field1 label{
display: block;
margin: 0.25em 0;
border: 1px solid #999;
border-radius: 0.4em;
background-color: #fff;
cursor: pointer;
}
#field1 label:hover,
#field1 label:active {
background-image: linear-gradient( to bottom, #fff, #fec );
}
#field1 legend label:hover,
#field1 legend label:active {
background-image: none;
}
#field1 label::before,
#field1 legend input:checked + label::before {
content: ' 2713';
font-size: 1.5em;
opacity: 0;
}
#field1 input:checked + label::before {
opacity: 1;
}
label[for="r0"] {
font-weight: bold;
}
label[for="r1"] {
color: #f00;
}
label[for="r2"] {
font-style: oblique;
color: #00f;
}
input[type="submit"] {
padding: 0.5em 1em;
border: 1px solid #040;
border-radius: 0.4em;
font-size: 1.5em;
background-color: #008000;
color: #fff;
}
</style>
</head>
<body>
<form action="?">
<fieldset id="field1">
<legend>
<input id="rx" name="item" type="radio" value="no-selection-made" required>
<label for="rx">Select items</label>
</legend>
<input id="r0" name="item" type="radio" value="item one">
<label for="r0">Item one</label>
<input id="r1" name="item" type="radio" value="item two">
<label for="r1">Item two</label>
<input id="r2" name="item" type="radio" value="item three">
<label for="r2">Item three</label>
</fieldset>
<input type="submit">
</form>
</body>
</html>
[i]coothead[/i]