masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(search): implementasikan searchform.php native dengan styling pill modern

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-17 21:29:14 +07:00
parent f7ce5496dd
commit df5eef38f4
2 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
searchform.php
+15
View File
@@ -0,0 +1,15 @@
<?php
defined( 'ABSPATH' ) || exit;
?>
<form role="search" method="get" class="search-form edukarsa-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="search-form-label">
<span class="screen-reader-text"><?php echo esc_html_x( 'Cari untuk:', 'label', 'edukarsa' ); ?></span>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Cari informasi / warta...', 'placeholder', 'edukarsa' ); ?>" value="<?php echo get_search_query(); ?>" name="s" required />
</label>
<button type="submit" class="search-submit" aria-label="<?php echo esc_attr_x( 'Kirim Pencarian', 'submit button', 'edukarsa' ); ?>">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</button>
</form>
style.css
+69
View File
@@ -950,3 +950,72 @@ body.edukarsa-popup-open { overflow: hidden; }
box-shadow: 0 6px 18px rgba(11, 74, 142, 0.25); box-shadow: 0 6px 18px rgba(11, 74, 142, 0.25);
} }
.edukarsa-popup-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(11, 74, 142, 0.35); } .edukarsa-popup-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(11, 74, 142, 0.35); }
/* 22. MODERN NATIVE SEARCH FORM */
.search-form.edukarsa-search-form,
.search-form {
display: flex;
align-items: center;
position: relative;
width: 100%;
margin: 0;
}
.search-form .search-form-label,
.search-form label {
flex: 1;
margin: 0;
position: relative;
width: 100%;
display: block;
}
.search-form .search-field {
width: 100%;
padding: 13px 52px 13px 20px;
background-color: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
color: var(--heading-color);
outline: none;
transition: all 0.25s ease;
font-family: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.search-form .search-field::placeholder {
color: #94a3b8;
font-size: 13.5px;
}
.search-form .search-field:focus {
background-color: #ffffff;
border-color: var(--secondary-color);
box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
}
.search-form .search-submit {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: #ffffff;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
padding: 0;
box-shadow: 0 4px 12px rgba(11, 74, 142, 0.25);
}
.search-form .search-submit:hover {
background: var(--primary-color);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 16px rgba(11, 74, 142, 0.35);
}
.search-form .search-submit svg {
display: block;
stroke: #ffffff;
}