覆盖用户代理样式表以使文本易于访问

Question

我正在尝试制作一个简单的独立页面，其中包含填充文本框的菜单（带有“Left 1”的菜单）。在移动设备和台式电脑上，框中的文本太小了。

我正在尝试使此文本框清晰可辨，但找不到方法。我尝试添加代码来覆盖用户代理，但它不起作用 - 理想情况下我想内联执行此操作。

这是一个匿名的 codepen 因为我不想公开分享整个项目

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css-ta-mere.css" />
        <title>martians on earts?</title>


<script src="html2canvas-example-master/html2canvas.min.js"></script>



<script type="text/javascript">



</script>

</head>

<body>

<div>



</div>
  
  <span style="color:#FFFFFF;"><h1 style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;">
  


  
        
        

          <style>
    .button {
        background-color: #ff7676;
        border: none;
        color: white;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 25px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 8px;
    }
    .button:hover {
        background-color: #7d7d7d;
    }
    
    
            @font-face {
            font-family: Metropolis-Thin;
            src: url(fonts/Metropolis-Thin.otf);
        }

        html,
        body {
            /* height: 100%;
            width: 100%;
            overflow: auto; */
            /* pointer-events: none; */
            background-color: black;
            /* margin: 0; */
            font-family: Metropolis-Thin;
            /* overscroll-behavior: contain; */
        }
    
    a:link {
  color: deeppink; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: coral;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: wheat;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: darkturquoise;
  background-color: transparent;
  text-decoration: underline;
}

.override {
    style:font-size: 25px; !important;
}



</style>
            
  
  <table width="800" border="0" align="center">

<tr>
    <span style="color:#FFFFFF;"><span style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;"><span style="font-size:72px;"><td colspan="2" align="center">bleep bloop<br />
<br />

</td></span></span></span></span>
</tr>


    <tr>

          

    <td align="center">LEFT
    <br/>
  
  
<input type="text" id="leftLabel" value="Left 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;" style="font-size:22px;">



<br/>

<select id="leftSelect" style="font-size:22px;">
  <option value="l1" selected>Flow</option>


</select>


  </td>
  
    
    <td align="center">RIGHT
    <br/>




<input type="text" id="rightLabel" value="Right 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;" style="font-size:22px;" class="override";>

<br/>

<select id="rightSelect" style="font-size:22px;">
  <option value="r1" selected>Flow</option>


  
</select>



<br/>

</td>

</tr>

<tr>

<td colspan="2" align="center">
<button id="pandabear" class="button" style="h1">BUTTON</button>
</td>
</tr>


</table>




</body>
</html>

Answer 1

问题是同一标签中有 2 个样式属性。这会导致第二个样式标签下落不明。您当前拥有的代码是：

<input type="text" id="leftLabel" value="Left 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;" style="font-size:22px;">

。第二个

style=""

被忽略。您可以通过将其替换为

<input type="text" id="leftLabel" value="Left 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light; font-size:22px;">

将它们合二为一。尽管最佳实践是有一个单独的

<style>

标签并在其中添加所有自定义属性。

覆盖用户代理样式表以使文本易于访问

问题描述投票：0回答：1

1个回答

最新问题

覆盖用户代理样式表以使文本易于访问

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1