如何防止文本通過CSS重疊按鈕

由於從圖像，你可以看到，我在輸入框中輸入文字，但我也有放置在該框中的按鈕，以便文本隱藏在框下方。

有沒有什麼辦法可以防止這種情況發生，按鈕也應該放在那個地方，而且文本不應該隱藏，而應該集中注意如果輸入更多的文本。

HTML代碼：

<div class="form"> 
    <input type="text" placeholder="Subscribe & Get Notified" id="email_inp"> 
    <button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button> 
</div>

CSS代碼是：

@media only screen and (max-width: 768px) 
{ 
input[type="text"] 
    { 
     font-family: "titillium_webregular", Arial, sans-serif; 
     border: none; 
     -webkit-border-radius: 3px 33px 33px 3px; 
     border-radius: 10px 33px 33px 10px; 
     color: rgba(85, 85, 85, 0.85); 
     font-size: 1.1em; 
     display: inline; 
     padding: 19.7px 13px; 
     background: #f5f5f5; 
     outline: none; 
     width: 93%; 
     box-shadow: 0px 11px 34px #111; 
     vertical-align: middle; 
    } 

.btn-1 
    { 
     cursor: pointer; 
     padding: 29px 29px; 
     display: inline-block; 
     position: relative; 
     vertical-align: middle; 
     margin-left: -67px; 
     text-indent: -9999px; 
     margin-top: 1px; 
     outline: none; 
     width: 20px; 
     height: 14px; 
     border:none; 
    } 
}

任何有助於理解。提前致謝。

來源

2017-01-18 Akshay Shrivastav

我會在輸入字段使用'填充右' –

試試這個..你可以看到文本框右邊的空格。我已經添加填充右文本框

$(function(){ 
 
    $('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'); 
 
});

#tbcss 
 
    { 
 
    padding-right: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<input type="text" id="tbcss"/>

來源

2017-01-18 11:39:30 Sharmila

謝謝你的男人這完美的工作。我不得不調整填充值爲70px，但代碼對我來說超級完美:) –

歡迎Akshay :) – Sharmila

如果您希望防止圖像隱藏文本，那麼您只需在輸入文本字段中增加填充右鍵屬性即可。

也許嘗試一個40px的值，甚至更多，直到你對結果滿意爲止，那麼脫字符不應該低於按鈕。

來源

2017-01-18 11:37:57 giotiskl

只需補充一點：

input[type="text"] 
{ 
    padding-right:5%; 
}

來源

2017-01-18 11:39:44

使用文本這個CSS。

{ 
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border: 1px solid #000000; 
}

來源

2017-01-18 11:47:41

在我看來，你應該用你的造型在一個有點不同的方式和過於使用.form CSS選擇器。您可以使用flexbox例如：

.form { 
    // NEW: 
    display: flex; 
    justify-content: space-between; 
    // Your old input CSS: 
    -webkit-border-radius: 3px 33px 33px 3px; 
    border-radius: 10px 33px 33px 10px; 
    background: #f5f5f5; 
    box-shadow: 0px 11px 34px #111; 
    width: 93%; 
} 

input[type="text"] { 
    // NEW: 
    width: 100%; 
    // Your old without unnecessary CSS: 
    font-family: "titillium_webregular", Arial, sans-serif; 
    color: rgba(85, 85, 85, 0.85); 
    border: none; 
    font-size: 1.1em; 
    padding: 19.7px 13px; 
    outline: none; 
    vertical-align: middle; 
} 

.btn-1 { 
    // NEW 
    align-self: flex-end; 
    // Your old without unnecessary CSS: 
    cursor: pointer; 
    padding: 29px 29px; 
    text-indent: -9999px; 
    margin-top: 1px; 
    outline: none; 
    width: 20px; 
    height: 14px; 
    border:none; 
}

加入WebKit的CSS屬性的情況下，你需要在老版本瀏覽器的支持。

來源

2017-01-18 11:48:25 szymonm

在這種情況下，您所需要做的就是添加「padding-right：50 px;」到輸入文本框類（50是隻是一個數字，你可以根據你的需要增加或減少）

來源

2017-08-24 05:35:36 ritesh

如何防止文本通過CSS重疊按鈕

回答

相關問題