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 you have read our privacy policy.

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