在提交表單的按鈕內部放置一個css形狀

-3

我想在提交表單的按鈕內放置一個CSS形狀，因爲我試圖以某種方式將css形狀放入<input type="submit">但我不得不使用html標籤<button>改爲...這是我的解決方案，並在您的搜索按鈕中放置一個不錯的純CSS搜索圖標。它可能需要一點調整雖然在提交表單的按鈕內部放置一個css形狀

#search-icon { 
 
    font-size: 4em; 
 
    display: inline-block; 
 
    width: 0.4em; 
 
    height: 0.4em; 
 
    border: 0.1em solid #B10B14; 
 
    position: relative; 
 
    border-radius: 0.35em; 
 
} 
 
#search-icon::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: -0.25em; 
 
    bottom: -0.1em; 
 
    border-width: 0; 
 
    background: #B10B14; 
 
    width: 0.35em; 
 
    height: 0.08em; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
}

<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>"> 
 
    <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="search-field" /> 
 
    <button type="submit" id="search-icon-container"> 
 
    <div id="search-icon"></div> 
 
    </button> 
 
</form>

來源

2016-03-23 MrKainig

ü爲什麼要使用DIV這個？一個按鈕會做對嗎？ –

html有'button'標籤 –

您可以完全按照樣式化div的樣式設置輸入標籤。 – Shomz

你有沒有考慮，你也可以使用字體真棒？

https://stackoverflow.com/tags/font-awesome/info

button i { 
 
    color:red;/*set the color */ 
 
    font-size:2em;./* set the size */ 
 
    } 
 
/* even add some text decoration */ 
 
i:before { 
 
    text-shadow:1px 1px 1px black; 
 
    }

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<button type="submit"><i class="fa fa-search"></i></button>

來源

2016-03-23 21:02:48

在提交表單的按鈕內部放置一個css形狀

回答

相關問題