我正在尝试制作一个可点击的框来禁用转换 CSS。我正在尝试用 javascript 覆盖 CSS,但它似乎不起作用。我希望他们在单击 后简单地向左和向下移动一点<a>
,如果他们只专注于<input>
.
.bigbox {
border: 2px solid black;
border-radius: 20px;
background-color: blue;
color: white;
padding-left: 15px;
}
#closebigbox {
padding: 10px;
border: 2px solid black;
border-radius: 20px;
background-color: blue;
color: white;
font-size: 8px;
width: 25px;
text-align: left;
background-color: silver;
}
.bigbox_submit{
padding: 3px;
border: 2px solid black;
border-radius: 20px;
background-color: blue;
color: white;
font-size: 12px;
width: 25px;
text-align: left;
background-color: silver;
}
.bigbox{
-moz-transition: all 0.5s ease-in-out;
}
.bigbox:focus {
background-color: #fc3;
-moz-transform: translate(125px,25px) scale(2);
}
<a href="javascript: document.getElementsByClassName('bigbox').style.position = 'relative'; document.getElementsByClassName('bigbox').style.left = '125px'; document.getElementsByClassName('bigbox').style.top = '25px';" id="closebigbox" >Clear</a>
<form>
<input type="text" class="bigbox" /><br/>
<input type="text" class="bigbox" /><br/>
<input type="text" class="bigbox" /><br/>
<a href="javascript:" class="bigbox_submit" >Submit</a>
</form>`