小记ios与android移动端input框disabled样式不一致问题

1. 情景描述

input框设置为disabled时在iosandroid上样式不一致。

2. 问题追踪

坚持不懈地搜索以及测试,才发现根本问题在于:ios会在input框为disabled时做透明度的设置,所以无论怎么调整颜色,总会不太一样,以下为测试代码:


<html>
<head>
	<meta charset="utf-8"/>
	<title>testtitle>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
	<style>
		input {
			border: 1px solid gray;
			outline: none;
			font-size: 1.5em;
		}
		.card {
			margin-bottom: 10px;
		}
		.card.normalset input {
			color: blue;
		}
		.card.normalset input::placeholder {
			color: black;
		}
		.card.setopacity input {
			color: blue;
			opacity: 1;
		}
		.card.setopacity input::placeholder {
			color: black;
		}
	style>
head>
<body>
	<div class="card">
		<div>默认的有value值的div>
		<div><label>默认可输label><input value="默认">div>
		<div><label>默认只读label><input readonly value="默认">div>
		<div><label>默认禁用label><input disabled value="默认">div>
	div>
	<div class="card normalset">
		<div>只设置input的colordiv>
		<div><label>普通设置可输label><input value="默认">div>
		<div><label>普通设置只读label><input readonly value="默认">div>
		<div><label>普通设置禁用label><input disabled value="默认">div>
	div>
	<div class="card">
		<div>默认的placeholderdiv>
		<div><label>默认可输label><input placeholder="默认">div>
		<div><label>默认只读label><input readonly placeholder="默认">div>
		<div><label>默认禁用label><input disabled placeholder="默认">div>
	div>
	<div class="card normalset">
		<div>只设置::placeholder的colordiv>
		<div><label>默认可输label><input placeholder="默认">div>
		<div><label>默认只读label><input readonly placeholder="默认">div>
		<div><label>默认禁用label><input disabled placeholder="默认">div>
	div>
	<div class="card setopacity">
		<div>value,透明度测试div>
		<div><label>value可输label><input value="默认">div>
		<div><label>value只读label><input readonly value="默认">div>
		<div><label>value禁用label><input disabled value="默认">div>
	div>
	<div class="card setopacity">
		<div>placeholder,透明度测试div>
		<div><label>placeholder可输label><input placeholder="默认">div>
		<div><label>placeholder只读label><input readonly placeholder="默认">div>
		<div><label>placeholder禁用label><input disabled placeholder="默认">div>
	div>
<script>
script>
body>
html>

3. 结论

ios 上input框的disabled样式会自动设置opacity透明度,readonly可以正常设置color等。除此之外,还有个问题,就是iosinput

4. 结果概览

以下为 ios 设置效果:
小记ios与android移动端input框disabled样式不一致问题_第1张图片
小记ios与android移动端input框disabled样式不一致问题_第2张图片

你可能感兴趣的:(前端)