如何控制css转换？

Question

我正在创建一个搜索条，它接受来自用户的搜索条件。我插入了一个CSS转换（它的宽度增加了点击）。我面临的问题是当我点击提交按钮时搜索栏的宽度减小。我不希望发生这种情况，搜索栏应保留其更改的宽度。 下面是HTML：

<input type="text" placeholder=" search" id="search"> 
    <button type="submit" id="submit" >submit </button> 
</form> 

这里是CSS：

input[type=text] { 
width: 130px; 
box-sizing: border-box; 
border: 2px solid black; 
border-radius: 4px; 
font-size: 16px; 
background-color: white; 
background-image: url("http://icons.iconarchive.com/icons/ampeross/qetto-2/256/search-icon.png"); 
background-size:40px; 
/*background-position: 10px 10px;*/ 
background-repeat: no-repeat; 
padding: 12px 20px 12px 40px; 
-webkit-transition: width 0.4s ease-in-out; 
transition: width 0.4s ease-in-out; 
margin-left:7%; 
} 

input[type=text]:focus { 
width: 75%; 
} 

这里是链接到我的代码，如果它有助于： https://codepen.io/ryoko1/pen/eRMYrg?editors=1111

Answer 1

我面临的问题是，当我点击提交按钮的搜索栏的宽度减小。

这是因为只要input losses它focus它decrease这是input width回最初分配或默认宽度。这种情况甚至发生在当你在页面的其他地方click不仅submit button而且原因是它从输入丢失焦点。因此请使用jQuery click（）方法。

$("input[type='text']").on("click",function(){ 
    $(this).css("width","75%"); 
}); //Add this to your jQuery 

$(document).ready(function() { 
 
    var url = "https://cors-anywhere.herokuapp.com/https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=bill gates"; 
 

 
    $.getJSON(url, function(data) { 
 
// console.log(data[1]); 
 
    }); 
 
    $("#submit").click(function() { 
 
    // document.getElementById("demo").innerHTML("hello"); 
 
    // console.log("hello"); 
 
    }); 
 
    $("input[type='text']").on("click", function() { 
 
    $(this).css("width", "75%"); 
 
    }); 
 
});

body { 
 
    background-color: black; 
 
    background-repeat: no-repeat; 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikipedia-logo-en-big.png/800px-Wikipedia-logo-en-big.png"); 
 
} 
 

 
h1 { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
input[type=text] { 
 
    width: 130px; 
 
    box-sizing: border-box; 
 
    border: 2px solid black; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    background-image: url("http://icons.iconarchive.com/icons/ampeross/qetto-2/256/search-icon.png"); 
 
    background-size: 40px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 40px; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out .1s; 
 
    margin-left: 7%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1> Wikipedia Viewer</h1> 
 
<form> 
 
    <input type="text" placeholder=" search" id="search"> 
 
    <button type="submit" id="submit">submit </button> 
 
</form> 
 
<p id="demo"></p>

Answer 2

您可以使用跃迁延迟（设为100ms）：

transition: width 0.4s ease-in-out .1s; 

f上的附加复位延迟ocused元素：

input[type=text]:focus { 
    transition-delay: 0s; 
}