0

Доброго времени! Делаю адаптивное меню есть там одна кнопка типа submit вот:

 <input type="submit" class="gener" name="prlog" value=" ">

при десктопном разрешении на ней стоит бэкграунд картинка вот так:

.gener {
  width: 50px;
  height: 31px;
  border: none;
  background: transparent url(../img/login.jpg) no-repeat center center;
  background-size: 100% 100%;
  cursor: pointer;
}

по этому value у элемента пустое - но в мобильной версии при адаптиве к примеру на 480px кнопка увеличивается и растягивается:

.gener {
  height: 100px;
  background: #3CAD5F url(../img/login.jpg) no-repeat right center;
  background-size: 100px 100%;
  width: 100%;
  cursor: pointer;
}

и нужно что бы в value было написано "Вход", увы я не могу просто сменить бэкграунд со значка (в десктопной версии) на картинку с надписью вход, хотя это было бы идеальным решением, т.к. на сайте будут в дальнейшем многоязыковые версии и надписи будут выводиться из переменных.

Можно ли как то установить value элемента путем css? Очень не хочу вставлять костыли через javascript

4
  • > костыли через javascript
    – user245150
    25 июл 2017 в 12:34
  • т.е. вы хотите сказать что выполнение таких простых задач через JS это костыль? Скорее костылем будет на CSS.
    – user245150
    25 июл 2017 в 12:35
  • @Duoxx это бессмысленный спор. Задать value через css НЕВОЗМОЖНО. 25 июл 2017 в 14:04
  • @Duoxx все, что можно сделать с помощью css в данной ситуации - подменить один input другим, через display: none. 25 июл 2017 в 14:12

2 ответа 2

0

Не уверен что это будет правильно, но:

div{
  width: 50px;
  position: relative;
  background: red;
  display: flex;
}

div:before{
  content: attr(data-value);
  position: absolute;
  z-index: 1;
  color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

input{
  width: 100%;
  height: 31px;
  border: none;
  background-size: 100% 100%;
  cursor: pointer;
  position: relative;
  z-index: 2;
  opacity: 0;
}
<div data-value="login"><input type="submit"  value=""></div>

0

Через js лучше. А почему на JS это костыль объясните. https://jsfiddle.net/84m4vt7g/

window.onresize = function() {
  if (window.innerWidth < 700)
    $('.responsive').val('Вход')
}
  if (window.innerWidth < 700)
    $('.responsive').val('Вход')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="Войти" class="responsive" type="submit">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.