Вы можете использовать конфигурационную электронную почту с помощью codeigniter, например, используя smtp (простой способ):
$config = Array(
'protocol' => 'smtp',
'smtp_host' => 'mail.domain.com', //your smtp host
'smtp_port' => 26, //default port smtp
'smtp_user' => 'name@domain.com',
'smtp_pass' => 'password',
'mailtype' => 'html',
'charset' => 'iso-8859-1',
'wordwrap' => TRUE
);
$message = 'Your msg';
$this->load->library('email', $config);
$this->email->from('name@domain.com', 'Title');
$this->email->to('emaildestination@domain.com');
$this->email->subject('Header');
$this->email->message($message);
if($this->email->send())
{
//conditional true
}
Это работает для меня!
Это 2017, и возможно настроить таргетинг на определенные варианты выбора. В моем проекте у меня есть таблица с классом = «варианты», а опции выбора находятся в ячейке таблицы td = «значение», а в элементе выбора есть идентификатор # pa_color. Элемент option также имеет параметр class = "attach" (среди других тегов класса). Если пользователь вошел в систему как оптовый клиент, они могут видеть все параметры цвета. Но розничным клиентам не разрешено приобретать 2 цветовых варианта, поэтому я отключил их
<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>
. Для этого потребовалась небольшая логика, но вот как я нацелился на отключенные опции выбора.
CSS
table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}
При этом мои параметры цвета видны только для оптовых покупателей.
Как уже упоминалось, единственный способ - использовать плагин, который заменяет функциональность <select>
.
Список плагинов jQuery: http://plugins.jquery.com/tag/ select /
Взгляните на пример с помощью плагина Select2
: http://jsfiddle.net/swsLokfj/23/
Я нашел и использовал этот хороший пример моделирования выбранных и опций. Вы можете сделать это, чтобы выбрать все, что вы хотите. Вот как Fiddle
html
<select id="selectbox1">
<option value="">Select an option…</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
css
body {
padding:50px;
background-color:white;
}
.s-hidden {
visibility:hidden;
padding-right:10px;
}
.select {
cursor:pointer;
display:inline-block;
position:relative;
font:normal 11px/22px Arial, Sans-Serif;
color:black;
border:1px solid #ccc;
}
.styledSelect {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
padding:0 10px;
font-weight:bold;
}
.styledSelect:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:black transparent transparent transparent;
position:absolute;
top:9px;
right:6px;
}
.styledSelect:active, .styledSelect.active {
background-color:#eee;
}
.options {
display:none;
position:absolute;
top:100%;
right:0;
left:0;
z-index:999;
margin:0 0;
padding:0 0;
list-style:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
padding:0 6px;
margin:0 0;
padding:0 10px;
}
.options li:hover {
background-color:#39f;
color:white;
}
JS
// Iterate over each select element
$('select').each(function () {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function (e) {
e.stopPropagation();
$('div.styledSelect.active').each(function () {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function (e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function () {
$styledSelect.removeClass('active');
$list.hide();
});
});
Bootstrap позволяет использовать стиль с помощью содержимого данных:
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
Пример: https://silviomoreto.github.io/bootstrap-select/examples/
Оставляя здесь быструю альтернативу, используя переключатель класса на столе. Поведение очень похоже на выбор, но может быть в стиле с переходами, фильтрами и цветами, каждый из которых индивидуально.
function toggleSelect(){
if (store.classList[0] === "hidden"){
store.classList = "viewfull"
}
else {
store.classList = "hidden"
}
}
#store {
overflow-y: scroll;
max-height: 110px;
max-width: 50%
}
.hidden {
display: none
}
.viewfull {
display: block
}
#store :nth-child(4) {
background-color: lime;
}
span {font-size:2rem;cursor:pointer}
<span onclick="toggleSelect()">⮋</span>
<div id="store" class="hidden">
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
</div>
Некоторые свойства могут быть написаны для метки <option>
:
font-family
color
font-*
background-color
Также вы можете использовать собственный шрифт для отдельного тега <option>
, например, любой шрифт google , Иконки материалов или другие значки шрифтов из icomoon или аналогичные. (Это может быть полезно для селекторов шрифтов и т. Д.).
Учитывая это, вы можете создавать шрифт семейства шрифтов и вставлять значки в теги <option>
, например
<select>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">a ★★★</option>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">b ★★★★</option>
</select>
, где ★
взято из Icons
, а остальное - от Roboto
.
Обратите внимание, что пользовательские шрифты не работают для мобильного выбора.
red
: & lt; option style = & quot; color: red; & quot; & gt; & gt; & gt;
– Dmitry_F
7 January 2017 в 18:26
Работает для меня:
.boldoption {
font-weight: bold;
}
<select>
<option>Some normal-font option</option>
<option>Another normal-font option</option>
<option class="boldoption">Some bold option</option>
</select>
Нет, это невозможно, так как стиль для этих элементов обрабатывается ОС пользователя. MSDN ответит на ваш вопрос здесь :
За исключением
background-color
иcolor
, параметры стиля, применяемые к объекту стиля для элемента опции, игнорируются.
Вы можете в некоторой степени стилизовать элементы опции.
Используя тэг * CSS, вы можете стилизовать параметры внутри поля, которое нарисовано системой.
Пример:
#ddlProducts *
{
border-radius:15px;
background-color:red;
}
Это будет выглядеть так:
[/g0]
EDIT: Я нашел эту удивительную библиотеку, которая заменяет стандартный элемент «select» в HTML с помощью «стильных» элементов: Select2 - https://select2.github.io/ examples.html
В 2011 году вам, возможно, не удалось создать стиль «option», но это 2015 год! Вы можете полностью его стилизовать! Я не понимаю некоторых ответов от 2014 года, говоря, что вы не можете его стилизовать! CSS3 творит чудеса. Я пробовал это в своем собственном коде, и выпадающие «опции» были написаны так же, как и стиль «select»
http://cssdeck.com/labs/styling-select -box-with-css3
Вот пример кода!
select {
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: black;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
На самом деле вы можете добавить: до и: после и стиль. По крайней мере, это что-то
option{
font-size:18px;
background-color:#ffffff;
}
option:before{
content: ">";
font-size:20px;
display:none;
padding-right:10px;
padding-left:5px;
color:#fff;
}
option:hover:before{
display:inline;
}
Как указано выше, не совсем возможно; однако, если вы просто хотите создать начальное состояние для чего-то вроде опции «Выбрать продукт ...», прежде чем пользователь взаимодействует с этим полем, вы можете сделать что-то вроде ниже -
Нижеприведенные стили (технически все) первый вариант красного цвета и один раз, когда пользователь взаимодействует, удалит этот параметр (который имеет значение = «defaultValue») и удалит класс, примененный к выбору. Вы также можете применять другие параметры, кроме цвета, но они будут влиять только на измененное поле, а не на список.
CSS
.default-value{
color: red;
}
jQuery
$("select").addClass('default-value');
$("select").bind("focus", function () {
$(this).children('option[value="defaultValue"]').remove();
$(this).removeClass('default-value');
});
Вы можете использовать встроенные стили, чтобы добавить стили custome в теги <option>
.
Например: <option style="font-weight:bold;color:#09C;">Option 1</option>
Это применит стили только к этому конкретному элементу <option>
.
Затем вы можете использовать немного магии javascript для применения встроенных стилей ко всем элементам <option>
в теге <select>
, например:
var select = $(document).getElementById('#select-element-id')
var option = select.children('#option-element-id')
option.css('font-weight', 'bold')
option.css('font-size', '24px')
Вы также можете использовать <option value="" disabled> <br> </option>
, чтобы добавить разрыв строки между варианты.
select > option
, но для этого нет надежного решения для кроссбраузеров, и, по крайней мере, на Chrome вы можете настроить размер шрифта, семейства, фона и переднего плана. Может быть, некоторые более хитрости, но вещи, такие как отступы, наведение цвета и т. Д., Я не мог преуспеть в изменении. Действительно, могут быть альтернативы, но в зависимости от проекта & lt; select & gt; тег может потребоваться, например, для угловой проверки или по какой-либо другой причине. – Felype 6 July 2015 в 14:49<option>
, но он показывает, как эмулировать<select>
, чтобы вы могли стилизовать параметры. – UndoingTech 5 April 2016 в 18:55