Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Строки меню в таблице / 10 сообщений из 10, страница 1 из 1
12.11.2021, 10:10
    #40111220
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
здравствуйте, опции поля выбора
<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% будет
спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 10:44
    #40111231
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
катастрофа , конкретно в option "заровнять" буквы можно только указав не пропорциональный шрифт.

Или начать писать свой самописный select...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 11:05
    #40111239
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
катастрофа,

http://htmlbook.ru/html/pre
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 12:28
    #40111268
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
вадя,
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<!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>


не взлетело, или я не так понял?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 12:51
    #40111275
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
катастрофа , в описании pre четко написано
авторЭлемент <pre> определяет блок предварительно форматированного текста .
Про select и option там нет ничего.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 13:34
    #40111299
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
катастрофа,

увы ничего не получится
если только не написать свой веб-компонент
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 15:21
    #40111385
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
вадя,
как сей портрет доделать до конца?
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<!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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 15:50
    #40111392
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
катастрофа
как сей портрет доделать до конца?

Как набросок...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<!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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 19:54
    #40111518
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
krvsa,
спасибо большое, а можно в коде
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<!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>


чтобы три     после названия цвета были указанного цвета?
спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2021, 20:34
    #40111529
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Строки меню в таблице
спасибо справился
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Строки меню в таблице / 10 сообщений из 10, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 382ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443167]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 27ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 255ms
total:  382ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]