Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Строки меню в таблице  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
здравствуйте, опции поля выбора
<option>01. White #FFFFFF 255, 255, 255</option>
<option>02. Black #000000 0, 0, 0</option>
<option>03. IndianRed #CD5C5C 205, 92, 92</option>
<option>04. Blue #0000FF 0, 0, 255</option>
<option>05. Silver #C0C0C0 192, 192, 192</option>
<option>06. Red #FF0000 255, 0, 0</option>
<option>07. Yellow #FFFF00 255, 255, 0</option>
<option>08. Fuchsia #FF00FF 255, 0, 255</option>
<option>09. Green #008000 0, 128, 0</option>
<option>10. Aqua #00FFFF 0, 255, 255</option>
<option>11. GreenYellow #ADFF2F 173, 255, 47</option>
<option>12. MediumSpringGreen #00FA9A 0, 250, 154</option>
как можно поместить их в поле в таблице бесцветной, чтобы выровнять?
пользоваться &ensp пробелом - это ж не современно, муторно, результат не 100% будет
спасибо
12 ноя 21, 10:10    [22394933]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
катастрофа, конкретно в option "заровнять" буквы можно только указав не пропорциональный шрифт.

Или начать писать свой самописный select...
12 ноя 21, 10:44    [22394948]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
катастрофа,

http://htmlbook.ru/html/pre
12 ноя 21, 11:05    [22394961]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
вадя,
<!DOCTYPE html>
<html>
 
<body>
    <select id="select1"><pre>
	<option>01. White              #FFFFFF  255,  255,  255</option>
        <option>02. Black              #000000  0,    0,    0</option>
        <option>03. IndianRed          #CD5C5C  205,  92,   92</option>
        <option>04. Blue               #0000FF  0,    0,    255</option>
        <option>05. Silver             #C0C0C0  192,  192,  192</option>
        <option>06. Red                #FF0000  255,  0,    0</option>
        <option>07. Yellow             #FFFF00  255,  255,  0</option>
        <option>08. Fuchsia            #FF00FF  255,  0,    255</option>
        <option>09. Green              #008000  0,    128,  0</option>
        <option>10. Aqua               #00FFFF  0,    255,  255</option>
        <option>11. GreenYellow        #ADFF2F  173,  255,  47</option>
        <option>12. MediumSpringGreen  #00FA9A  0,    250,  154</option></pre>
    </select>
    <script>[...select1.querySelectorAll("option")].forEach(e => e.style.color = /#(?:[0-9a-fA-F]{3}){1,2}/g.exec(e.innerHTML))</script>
</body>
 
</html>

не взлетело, или я не так понял?

Сообщение было отредактировано: 12 ноя 21, 12:29
12 ноя 21, 12:28    [22395011]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
катастрофа, в описании pre четко написано
автор
Элемент <pre> определяет блок предварительно форматированного текста.

Про select и option там нет ничего.
12 ноя 21, 12:51    [22395021]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
катастрофа,

увы ничего не получится
если только не написать свой веб-компонент
12 ноя 21, 13:34    [22395049]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
вадя,
как сей портрет доделать до конца?
<!DOCTYPE html>
<html>
 
<body>
    <div id="select1">
        <pre>01. White              #FFFFFF   255,   255,   255</pre>
        <pre>02. Black              #000000   0,     0,     0</pre>
        <pre>03. IndianRed          #CD5C5C   205,   92,    92</pre>
        <pre>04. Blue               #0000FF   0,     0,     255</pre>
        <pre>05. Silver             #C0C0C0   192,   192,   192</pre>
        <pre>06. Red                #FF0000   255,   0,     0</pre>
        <pre>07. Yellow             #FFFF00   255,   255,   0</pre>
        <pre>08. Fuchsia            #FF00FF   255,   0,     255</pre>
        <pre>09. Green              #008000   0,     128,   0</pre>
        <pre>10. Aqua               #00FFFF   0,     255,   255</pre>
        <pre>11. GreenYellow        #ADFF2F   173,   255,   47</pre>
        <pre>12. MediumSpringGreen  #00FA9A   0,     250,   154</pre>
    </div>
    <script>[...select1.querySelectorAll("option")].forEach(e => e.style.color = /#(?:[0-9a-fA-F]{3}){1,2}/g.exec(e.innerHTML))</script>
</body>
</html>
12 ноя 21, 15:21    [22395159]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
катастрофа
как сей портрет доделать до конца?

Как набросок...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.select > table {
	display: none;
	border: 1px solid;
}
.select tr:hover {
	background-color: silver;
	cursor: pointer;
}
.select.open > table {
	display: table;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
	document.querySelectorAll('.select').forEach(slct => {
		slct.querySelector('button').addEventListener('click', el => {
			slct.classList.toggle('open')
		})
		slct.querySelector('table').addEventListener('click', el => {
			if (el.target.tagName !== 'TD') return
			const tr = el.target.parentNode
			slct.querySelector('input').value = tr.cells[1].innerHTML
			slct.classList.remove('open')
		})
	})
})
</script>
</head>
<body>
<div class="select">
	<div>
		<input />
		<button>_</button>
	</div>
	<table>
		<tr><td>01.<td>White<td>#FFFFFF<td>255<td>255<td>255</tr>
		<tr><td>02.<td>Black<td>#000000<td>0<td>0<td>0</tr>
		<tr><td>03.<td>IndianRed<td>#CD5C5C<td>205<td>92<td>92</tr>
		<tr><td>04.<td>Blue<td>#0000FF<td>0<td>0<td>255</tr>
		<tr><td>05.<td>Silver<td>#C0C0C0<td>192<td>192<td>192</tr>
	</table>
</div>
</body>
</html>
12 ноя 21, 15:50    [22395170]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
krvsa,
спасибо большое, а можно в коде
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.clr_select > table {
	display: none;
	border: 1px solid;
}
.clr_select tr:hover {
	background-color: silver;
	cursor: pointer;
}
.clr_select.open > table {
	display: table;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
	document.querySelectorAll('.clr_select').forEach(slct => {
		slct.querySelector('button').addEventListener('click', el => {
			slct.classList.toggle('open')
		})
		slct.querySelector('table').addEventListener('click', el => {
			if (el.target.tagName !== 'TD') return
			const tr = el.target.parentNode
			slct.querySelector('input').value = tr.cells[1].innerHTML
			slct.classList.remove('open')
		})
	})
})
</script>
</head>
<body>
<div class="clr_select">
<div><input/><button>+</button></div>
<table>
<tr><td>01.<td>White            &ensp;&ensp;&ensp;<td>#FFFFFF<td>&ensp;255,   <td>&ensp;255,   <td>&ensp;255</tr>
<tr><td>02.<td>Black            &ensp;&ensp;&ensp;<td>#000000<td>&ensp;0,     <td>&ensp;0,     <td>&ensp;0</tr>
<tr><td>03.<td>IndianRed        &ensp;&ensp;&ensp;<td>#CD5C5C<td>&ensp;205,   <td>&ensp;92,    <td>&ensp;92</tr>
<tr><td>04.<td>Blue             &ensp;&ensp;&ensp;<td>#0000FF<td>&ensp;0,     <td>&ensp;0,     <td>&ensp;255</tr>
<tr><td>05.<td>Silver           &ensp;&ensp;&ensp;<td>#C0C0C0<td>&ensp;192,   <td>&ensp;192,   <td>&ensp;192</tr>
<tr><td>06.<td>Red              &ensp;&ensp;&ensp;<td>#FF0000<td>&ensp;255,   <td>&ensp;0,     <td>&ensp;0</tr>
<tr><td>07.<td>Yellow           &ensp;&ensp;&ensp;<td>#FFFF00<td>&ensp;255,   <td>&ensp;255,   <td>&ensp;0</tr>
<tr><td>08.<td>Fuchsia          &ensp;&ensp;&ensp;<td>#FF00FF<td>&ensp;255,   <td>&ensp;0,     <td>&ensp;255</tr>
<tr><td>09.<td>Green            &ensp;&ensp;&ensp;<td>#008000<td>&ensp;0,     <td>&ensp;128,   <td>&ensp;0</tr>
<tr><td>10.<td>Aqua             &ensp;&ensp;&ensp;<td>#00FFFF<td>&ensp;0,     <td>&ensp;255,   <td>&ensp;255</tr>
<tr><td>11.<td>GreenYellow      &ensp;&ensp;&ensp;<td>#ADFF2F<td>&ensp;173,   <td>&ensp;255,   <td>&ensp;47</tr>
<tr><td>12.<td>MediumSpringGreen&ensp;&ensp;&ensp;<td>#00FA9A<td>&ensp;0,     <td>&ensp;250,   <td>&ensp;154</tr>
</div>
</body>
</html>

чтобы три     после названия цвета были указанного цвета?
спасибо
12 ноя 21, 19:54    [22395323]     Ответить | Цитировать Сообщить модератору
 Re: Строки меню в таблице  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
спасибо справился
12 ноя 21, 20:34    [22395337]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить