diff options
Diffstat (limited to 'files/ru/web/html/element/input')
| -rw-r--r-- | files/ru/web/html/element/input/color/index.html | 16 | ||||
| -rw-r--r-- | files/ru/web/html/element/input/date/index.html | 22 | ||||
| -rw-r--r-- | files/ru/web/html/element/input/number/index.html | 28 | ||||
| -rw-r--r-- | files/ru/web/html/element/input/radio/index.html | 14 | ||||
| -rw-r--r-- | files/ru/web/html/element/input/range/index.html | 28 |
5 files changed, 54 insertions, 54 deletions
diff --git a/files/ru/web/html/element/input/color/index.html b/files/ru/web/html/element/input/color/index.html index d2b44fcebe..a74bd698ee 100644 --- a/files/ru/web/html/element/input/color/index.html +++ b/files/ru/web/html/element/input/color/index.html @@ -65,7 +65,7 @@ translation_of: Web/HTML/Element/input/color <p>Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:</p> -<pre class="brush: html notranslate"><input type="color" value="#ff0000"></pre> +<pre class="brush: html"><input type="color" value="#ff0000"></pre> <p>{{EmbedLiveSample("Предоставление_цвета_по_умолчанию", 700, 30)}}</p> @@ -77,7 +77,7 @@ translation_of: Web/HTML/Element/input/color <p>Вот пример, который наблюдает за изменениями со временем значения цвета:</p> -<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false); +<pre class="brush: js">colorPicker.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false); function watchColorPicker(event) { @@ -91,7 +91,7 @@ function watchColorPicker(event) { <p>Если реализация элемента {{HTMLElement("input")}} типа <code>color</code> в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать {{domxref("HTMLInputElement.select", " select ()")}} метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует <code>color</code>, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.</p> -<pre class="brush: js notranslate">colorWell.select();</pre> +<pre class="brush: js">colorWell.select();</pre> <h3 id="Вариации_внешнего_вида">Вариации внешнего вида</h3> @@ -115,7 +115,7 @@ function watchColorPicker(event) { <p>HTML довольно прост — пара абзацев описательного материала с {{HTMLElement ("input")}} типа <code>color </code>с идентификатором <code>colorWell</code>, который мы будем использовать для изменения цвета текста абзацев.</p> -<pre class="brush: html notranslate"><p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code> +<pre class="brush: html"><p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code> control.</p> <label for="colorWell">Color:</label> @@ -132,7 +132,7 @@ function watchColorPicker(event) { <p>Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик {{domxref("Window/load_event", "load")}} для выполнения основной работы запуска, как только страница будет полностью загружена.</p> -<pre class="brush: js notranslate">var colorWell; +<pre class="brush: js">var colorWell; var defaultColor = "#0000ff"; window.addEventListener("load", startup, false); @@ -142,7 +142,7 @@ window.addEventListener("load", startup, false); <p>Как только страница загружена, вызывается наш обработчик событий загрузки <code>startup()</code>:</p> -<pre class="brush: js notranslate">function startup() { +<pre class="brush: js">function startup() { colorWell = document.querySelector("#colorWell"); colorWell.value = defaultColor; colorWell.addEventListener("input", updateFirst, false); @@ -159,7 +159,7 @@ window.addEventListener("load", startup, false); <p>Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция <code>updateFirst()</code> вызывается в ответ на <code>input</code> событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку <code>input</code> события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.</p> -<pre class="brush: js notranslate">function updateFirst(event) { +<pre class="brush: js">function updateFirst(event) { var p = document.querySelector("p"); if (p) { @@ -169,7 +169,7 @@ window.addEventListener("load", startup, false); <p>Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие <code>change</code>. Мы обрабатываем это событие с помощью функции <code>updateAll()</code>, используя {{domxref("HTMLInputElement.value", "Event.target.value")}} для получения окончательного выбранного цвета:</p> -<pre class="brush: js notranslate">function updateAll(event) { +<pre class="brush: js">function updateAll(event) { document.querySelectorAll("p").forEach(function(p) { p.style.color = event.target.value; }); diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html index 23d6d631cc..d6f809030c 100644 --- a/files/ru/web/html/element/input/date/index.html +++ b/files/ru/web/html/element/input/date/index.html @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/input/date <p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введённой в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p> -<pre class="brush: html notranslate"><input id="date" type="date" value="2017-06-01"></pre> +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> <p>{{EmbedLiveSample('Значение', 600, 40)}}</p> @@ -64,7 +64,7 @@ translation_of: Web/HTML/Element/input/date <p>Вы также можете получить или установить значение даты в JavaScript с помощью свойств {{domxref("HTMLInputElement.value", "value")}} и {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} элемента input. Например:</p> -<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]'); +<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01'; console.log(dateControl.value); // prints "2017-06-01" console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms) @@ -135,7 +135,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Самый простой способ использовать <code><input type="date"></code> - это использовать его с элементами <code><input></code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>, как показано ниже:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="bday">Введите дату вашего рождения:</label> <input type="date" id="bday" name="bday"> @@ -148,7 +148,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Вы можете использовать атрибуты {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}}, чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату <code>2017-04-01</code> и максимальную дату <code>2017-04-30</code>. Пользователь сможет выбрать дату только из этого диапазона:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Укажите предпочтительную дату события:</label> <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> @@ -177,7 +177,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Let's look at an example — here we've set minimum and maximum dates, and also made the field required:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Choose your preferred party date (required, April 1st to 20th):</label> <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> @@ -198,7 +198,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; display: flex; align-items: center; @@ -244,7 +244,7 @@ input:valid+span:after { <p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="bday">Enter your birthday:</label> <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> @@ -260,7 +260,7 @@ input:valid+span:after { <p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as <code>yyyy-dd-mm</code> (whereas we want <code>yyyy-mm-dd</code>). So we still have a problem.</p> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -297,7 +297,7 @@ input:valid + span:after { <p>The HTML looks like so:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="nativeDatePicker"> <label for="bday">Enter your birthday:</label> <input type="date" id="bday" name="bday"> @@ -338,7 +338,7 @@ input:valid + span:after { <p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)</p> <div class="hidden"> -<pre class="brush: css notranslate">input:invalid+span:after { +<pre class="brush: css">input:invalid+span:after { content: '✖'; padding-left: 5px; } @@ -353,7 +353,7 @@ input:valid+span:after { <p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="date"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code><input type="date"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p> -<pre class="brush: js notranslate">// define variables +<pre class="brush: js">// define variables var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html index b9f77cd132..2b746109af 100644 --- a/files/ru/web/html/element/input/number/index.html +++ b/files/ru/web/html/element/input/number/index.html @@ -42,7 +42,7 @@ translation_of: Web/HTML/Element/input/number <p>{{jsxref("Number")}}, представляющий значение введённого числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:</p> -<pre class="brush: html notranslate"><input id="number" type="number" value="42"></pre> +<pre class="brush: html"><input id="number" type="number" value="42"></pre> <p>{{EmbedLiveSample('Value', 600, 40)}}</p> @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input/number <p>In its most basic form, a number input can be implemented like this:</p> -<pre class="brush: html notranslate"><label for="ticketNum">Number of tickets you would like to buy:</label> +<pre class="brush: html"><label for="ticketNum">Number of tickets you would like to buy:</label> <input id="ticketNum" type="number" name="ticketNum" value="0"></pre> <p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p> @@ -148,7 +148,7 @@ translation_of: Web/HTML/Element/input/number <p>Here, we have an <code>number</code> input with the placeholder <code>"Multiple of 10"</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> -<pre class="brush: html notranslate"><input type="number" placeholder="Multiple of 10"></pre> +<pre class="brush: html"><input type="number" placeholder="Multiple of 10"></pre> <p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p> @@ -156,7 +156,7 @@ translation_of: Web/HTML/Element/input/number <p>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a {{htmlattrxref("step", "input")}} attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a <code>step</code> value of 10:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10"></pre> +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10"></pre> <p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p> @@ -166,7 +166,7 @@ translation_of: Web/HTML/Element/input/number <p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> <p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p> @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/input/number <p>One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the <code>step</code> value (e.g. <code>step="0.01"</code> to allow decimals to two decimal places). Here's a simple example:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> +<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> <p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p> @@ -188,11 +188,11 @@ translation_of: Web/HTML/Element/input/number <p>For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> +<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> <p>Then we add some CSS to narrow the width of the element with the ID <code>number</code>:</p> -<pre class="brush: css notranslate">#number { +<pre class="brush: css">#number { width: 3em; }</pre> @@ -204,7 +204,7 @@ translation_of: Web/HTML/Element/input/number <p>You can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute, which contains as its value the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p> -<pre class="brush: html notranslate"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<pre class="brush: html"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> <span class="validity"></span> <datalist id="defaultNumbers"> @@ -234,7 +234,7 @@ translation_of: Web/HTML/Element/input/number <p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="balloons">Number of balloons to order (multiples of 10):</label> <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> @@ -251,7 +251,7 @@ translation_of: Web/HTML/Element/input/number <p>The CSS applied to this example is as follows:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -283,7 +283,7 @@ input:valid+span:after { <p>The HTML looks like this:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="metersInputGroup"> <label for="meters">Enter your height — meters:</label> <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> @@ -311,7 +311,7 @@ input:valid+span:after { <p>Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } @@ -338,7 +338,7 @@ input:valid+span:after { <p>And finally, the JavaScript:</p> -<pre class="brush: js notranslate">var metersInputGroup = document.querySelector('.metersInputGroup'); +<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup'); var feetInputGroup = document.querySelector('.feetInputGroup'); var metersInput = document.querySelector('#meters'); var feetInput = document.querySelector('#feet'); diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html index 729ad3a3cc..776b89fca1 100644 --- a/files/ru/web/html/element/input/radio/index.html +++ b/files/ru/web/html/element/input/radio/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTML/Element/input/radio <p><span class="seoSummary">Атрибут<strong> type</strong> тега <code><input></code> со значением <strong><code>radio</code></strong> обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.</span> Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.</p> <div id="Basic_example"> -<pre class="brush: html notranslate"><input type="radio" id="radioButton"></pre> +<pre class="brush: html"><input type="radio" id="radioButton"></pre> <p>{{ EmbedLiveSample('Basic_example', 600, 30) }}</p> @@ -73,7 +73,7 @@ translation_of: Web/HTML/Element/input/radio <p>HTML будет выглядеть следующим образом:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -113,7 +113,7 @@ translation_of: Web/HTML/Element/input/radio <p>Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока {{HTMLElement("pre")}} для вывода данных формы. </p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -136,7 +136,7 @@ translation_of: Web/HTML/Element/input/radio <p>Затем добавим немного <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Установим обработчик события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":</p> -<pre class="brush: js notranslate">var form = document.querySelector("form"); +<pre class="brush: js">var form = document.querySelector("form"); var log = document.querySelector("#log"); form.addEventListener("submit", function(event) { @@ -161,7 +161,7 @@ form.addEventListener("submit", function(event) { <p>Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -203,7 +203,7 @@ form.addEventListener("submit", function(event) { <p>HTML будет выглядеть следующим образом:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <fieldset> <legend>Please select your preferred contact method:</legend> <div> @@ -229,7 +229,7 @@ form.addEventListener("submit", function(event) { <p>CSS будет выглядеть так:</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html index a3fcca88d8..231f03d7b4 100644 --- a/files/ru/web/html/element/input/range/index.html +++ b/files/ru/web/html/element/input/range/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/input/range <p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}}, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (<code>""</code>). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута <code>min</code>. Алгоритм определения значения по умолчанию:</p> -<pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> <p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.</p> @@ -159,7 +159,7 @@ translation_of: Web/HTML/Element/input/range <p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p> -<pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> <p>{{EmbedLiveSample("Указание_минимума_и_максимума", 600, 40)}}</p> @@ -168,7 +168,7 @@ translation_of: Web/HTML/Element/input/range <p>По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут {{htmlattrxref("step")}} контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение <code>step</code> на 0.01:</p> <div id="Granularity_sample1"> -<pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> <p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> </div> @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/input/range <p>Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение <code>any</code> для атрибута {{htmlattrxref("step", "input")}}:</p> <div id="Granularity_sample2"> -<pre class="brush: html notranslate"><input type="range" min="0" max="3.14" step="any"></pre> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> @@ -203,7 +203,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range"></pre> </td> <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> @@ -223,7 +223,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -258,7 +258,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -333,7 +333,7 @@ translation_of: Web/HTML/Element/input/range <p>В HTML нужно добавить обёртку вокруг {{HTMLElement("input")}} - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p> -<pre class="brush: html notranslate"><div class="slider-wrapper"> +<pre class="brush: html"><div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div></pre> @@ -341,7 +341,7 @@ translation_of: Web/HTML/Element/input/range <p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p> -<pre class="brush: css notranslate">.slider-wrapper { +<pre class="brush: css">.slider-wrapper { display: inline-block; width: 20px; height: 150px; @@ -351,7 +351,7 @@ translation_of: Web/HTML/Element/input/range <p>Затем информация о стиле элемента <code><input></code> в зарезервированном пространстве:</p> -<pre class="brush: css notranslate">.slider-wrapper input { +<pre class="brush: css">.slider-wrapper input { width: 150px; height: 20px; margin: 0; @@ -378,7 +378,7 @@ translation_of: Web/HTML/Element/input/range <p>Берём только те инпуты что имеют тип range:</p> -<pre class="notranslate">input[type="range"] { +<pre>input[type="range"] { -webkit-appearance: slider-vertical; }</pre> @@ -405,14 +405,14 @@ translation_of: Web/HTML/Element/input/range <p>Используем тот же HTML что и в предыдущем примере:</p> -<pre class="brush:html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +<pre class="brush:html"><input type="range" min="0" max="11" value="7" step="1"> </pre> <h4 id="CSS_4">CSS</h4> <p>Берём только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; }</pre> @@ -433,7 +433,7 @@ translation_of: Web/HTML/Element/input/range <p>Берём только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; }</pre> |