HTML/ModX styling for selected textboxes

I am looking to enhance the style of my search-box, which is similar to the one on THIS website. While I have tried using :active, the effect only lasts for a brief moment. Currently, my code is heavily influenced by modX terms, but I will still share it here.


<form class="sisea-search-form" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
  <fieldset>
    <label for="search"> Search:</label>
    <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" />
    <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" /> 
    <input type="submit" value="[[%sisea.search? &namespace=`sisea` &topic=`default`]]" />
  </fieldset>
</form>

.sisea-search-form{
  font-family: arial;
  font-size: 12px;
  color: #555555;
  margin-top:10px;
}
.sisea-search-form label{
  margin-left: 15px;
  cursor: default;
}
#search:active{
  border-width:5px;
  border-style:solid;
  border-color:black;
}
.sisea-search-form input[type="text"]{
  width:130px;
}
.sisea-search-form input[type="submit"]{
  width:55px;
}

<h3>Search</h3>
        [[!SimpleSearchForm? &tpl=`simpleSearchTpl` &landing=`58` ]]
[[-<form role="search" method="get" id="searchform" action="#">
    <div class="zoekVeld">

        <input type="submit" class="searchButton" value="Zoeken">
    </div>
</form>]]

The modX part at the end may not be relevant to my query. Cheers, Marco.


EDIT


I am interested in combining the active and focus selectors for an extended effect or a focus selector that fades after a few seconds.

Answer №1

Here's a little tip for you.

To enhance your CSS, add a :focus class with these styles when the element is active:

input:focus{
    border-width:5px;
    border-style:solid;
    border-color:transparent;
    -webkit-transition : border-color 0.5s
    -moz-transition : border-color 0.5s
    -o-transition : border-color 0.5s
    transition : border-color 0.5s
}

I've created a fiddle for you to easily adjust the values and achieve your desired outcome: http://jsfiddle.net/kDqhP/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

Struggling to get the Hover feature on Link from Material-UI to function properly

I've been attempting to hover over Link from Material UI, but unfortunately, it's not working as expected. The CSS styles are not being applied for some unknown reason, and I can't seem to figure out why. Additionally, the Button class is al ...

What is the proper way to display the initial content of the menu?

I am currently working on a website design for an upcoming festival. The festival spans over three days, so I have created buttons to navigate and load the content for each day separately. Is there a way for me to make the content for the first day di ...

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

Is there a minimum height restriction for v-select in Vuetify.js?

Looking at the code snippet provided below, I am facing an issue while trying to decrease the height of a v-select element. It seems like there is a minimum limit set for the height, as reducing it beyond height = 40 doesn't have any effect. Is there ...

Unexpected behavior with CSS background-image transitions effects

Currently, I am experimenting with a hover swipe effect using div and background image. The background image utilizes the outer div's max-width and an inner div with a padding-bottom percentage to maintain the aspect ratio. However, there are several ...

Employing jQuery, how can one assign attributes to appended HTML and store them

So, I am currently working on a backend page for managing a blog. This page allows users to create, edit, and delete articles. When the user clicks the "edit" button for a specific article named 'foo', the following actions are performed: The ...

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

I am in search of creative solutions to address an issue I'm facing. Currently, I am utilizing TINYMCE to incorporate text into my webpage. However, I would like to enhance this functionality by having a feature that allows me to add an image along w ...

Tips for adjusting the time interval on an automatic slideshow when manual controls are in play

I'm having trouble with my slideshow. I want it to run automatically and also have manual controls, but there are some issues. When I try to manually control the slides, it takes me to the wrong slide and messes up the timing for the next few slides. ...

The div is not completely encased by the fieldset

I have utilized fieldset to generate a titled border around a div. Here is the code snippet: <div class="form-group col-xs-12"> <fieldset class="field_set col-xs-12"> <legend style="font-weight:bold;font-size:20px"> ...

Tips for adjusting custom spacing margins within Material UI Grid

Is there a way to adjust the spacing between Grid items in Material UI? Here's the code I currently have: <Grid container spacing={1}> <Grid item xs={6}>Node 1</Grid> <Grid item xs={6}>Node 2</Grid> ...and so ...

Creating a JSON array using looping technique

I am attempting to construct a JSON array using a loop where the input className and value will serve as the JSON obj and key. However, I am facing difficulties in creating one and cannot seem to locate any resources on how to do so. Below is an example sn ...

What is the process for calculating and determining the exact area the div should be released?

I am currently developing a drag-and-drop application using only Javascript. I have successfully implemented the dragging functionality, allowing elements to be moved randomly within the page. However, I now face the challenge of creating a drop zone with ...

Tips for creating responsive designs with specific media queries for various device sizes

I am looking to create a responsive website using media queries and have already created different media queries for mobile, tablets, and desktops. However, I am unsure if I should be writing the same CSS code multiple times for various device sizes, such ...

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

How to use CSS to align a link vertically next to an image

UPDATE: Apologies for the duplicate post, I am still learning the ropes of CSS. However, I would appreciate it if someone could shed light on why aligning the image is preferable to aligning the link or text. Is there a broader concept in play here that ...

When swiping right with Swiper.js, the slides are jumping by all, skipping the following slide, but the left swipe functions correctly

Here is the code I used for my swiper element: new Swiper("#swiper-pricing", { slidesPerView: 1.3, spaceBetween: 30, centeredSlides: true, loop: true, keyboard: { enabled: true, }, autoplay: { delay: 50 ...

Change the color of the div's background

My grid created using bootstrap 3 divs consists of a button, followed by a radio button, and then another button. I want to highlight these elements with a consistent background color that stretches across like a single row. Check out my attempt on this f ...

Removing extra spaces from a hyperlink using CSS

Can CSS be used to remove extra whitespaces? Within the code snippet provided, there is an additional whitespace in the <a> tag. This link is generated by a WordPress plugin and I prefer not to make changes directly to the source files of the plugin. ...

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...