Смена значения value в submit при адаптиве css
Доброго времени! Делаю адаптивное меню есть там одна кнопка типа 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
Не уверен что это будет правильно, но:
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>Через 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">
-
21:12
Оборудование для ресторана: новинки профессиональной кухонной техники
-
22:17
-
22:13
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
-
20:12
-
20:06
-
19:59
-
19:51
-
19:43
-
18:31
- Почему SERVER_ADDR имеет не тот IP 48064 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30578 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 24017 visits
- Как через css изменить цвет png изображения? 10424 visits
- Blob video url download 10016 visits
- Php curl запрос через прокси с авторизацией 9292 visits
- Работа с captcha vk api 8158 visits
© "hostciti.net" 18.4.2025 | 21:36