Troubleshooting issues with input elements and CSS on website

I have been struggling with styling an input element using CSS. Design is not my forte. I am attempting to achieve something like this:

https://i.sstatic.net/V81PI.jpg

My input field is housed within a form inside a list item:

<li>
<FORM class="searchform" NAME="Search" ACTION="./index.cfm?P=128" METHOD=POST >
    <INPUT type="text" name=search value="" STYLE="color: #676767; background-color: #282828; line-height: 18px" size="10" maxlength="40"  Placeholder="search">
    <INPUT class="search_button" TYPE=SUBMIT NAME="SubmitButton1" VALUE="Search" ID="SubmitButton1">
</FORM></li>

This is how I have styled it with CSS:

    @import url(http://fonts.googleapis.com/css?family=Montserrat);
body, html {height: 100%; margin: 0; font-size:16px;}
body {font-family: Arial;}
<header {width: 100%; background-image: url('img/top-bg.png'); background-repeat: repeat-x; background-color: #dfebf2; position: fixed; height: 70px; z-index:2;}
aside {width: 270px; min-height: 100%; position: fixed; background-color: #dfebf2; left: 0; max-height: 100%; overflow-y: auto; /* border-right: 1px solid #bdcada; */}
section {top: 70px; left: 270px; position: absolute;}
h3 {font-family: 'Montserrat', Arial; text-transform: uppercase;font-size:15px;}
select {width: 230px; height: 34px; border: 1px solid #bdcada; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding-left: 8px; border-radius: 3px;}

/* Other CSS styles... */

input.search_button {
    color: black;
    line-height: 23px;
    font-weight: bold;
    font-size: 10px;
    font-family: 'Montserrat', Arial;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px;
    width: 20em;
    height: 2em; 
}

.height-112px {height: 112px;}
#logo-box {float: left; margin-left: 20px; margin-top:10px; width: 250px;}

/* More CSS styles... */

However, the alignment of my search button in relation to my list item is off. The current outcome looks like this:

https://i.sstatic.net/mZyyJ.jpg

Any suggestions on what I might be doing incorrectly?

Thank you

Answer №1

customize your search button with the following styles

input.search_button {
  color: black;
  font-weight: bold;
  font-size: 10px;
  font-family: 'Montserrat', Arial;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 2px;

}

To style a particular input, assign an id and apply the desired styles as mentioned

Snippet

@import url(http://fonts.googleapis.com/css?family=Montserrat);
body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
}
/* CSS Styles for various elements */
(body{background:black;}

More CSS content here...

<li>
  <FORM class="searchform" NAME="Search" ACTION="./index.cfm?P=128" METHOD=POST>
    <INPUT type="text" name=search value="" STYLE="color: #676767; background-color: #282828; line-height: 18px" size="10" maxlength="40" Placeholder="search">
    <INPUT class="search_button" TYPE=SUBMIT NAME="SubmitButton1" VALUE="Search" ID="SubmitButton1">
  </FORM>
</li>

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

showcasing a picture retrieved from an express server

Struggling to incorporate an image from an api into an img tag, unsure of the data type and how to process it for display. The data remains consistent regardless of using pipe() or res.sendFile(). Witness the server in action: app.get('/image', ...

What is the mechanism behind the functionality of padding percentage?

HTML <div class='container'> <div class='boxContainer'> The text inside this box should be centered vertically </div> </div> CSS .container { position: relative; height: 300px; wid ...

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

Scroll events on iOS may not always be triggered within a div element located inside a modal

In my Vue component within the application, I have set up a hierarchy with various styles: <template lang="pug"> my-modal-component.modal-container template(v-slot:content) swiper.swiper( :options="swiperOptio ...

Tips for adjusting the size of a div based on an external numeric value using jQuery and CSS

I am seeking to adjust the size of a div based on the numerical value contained in another div. For instance, if the number is 0, the div should have a width: 20px; height 0px;, if it's 50, the div should be width: 20px; height 50px;, and for 100, the ...

Activate the child for an update

Welcome! I am a newcomer to Angular and would greatly appreciate any assistance. The parent component of my picker has the ability to create various rules for each option. However, these rules are dynamic and can change frequently. I need to ensure that ...

HTML: Issue with H1 alignment in class

I'm a beginner with HTML and I've been attempting to center the H1 using a CSS class, but it doesn't seem to be working for me. Here's my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> ...

I'm currently working on setting up my registration website, however, I've encountered an error in the terminal

I encountered an error message stating: TypeError: Object of type builtin_function_or_method is not JSON serializable Can someone explain the meaning of this message to me? ...

Having trouble with the WordPress style file not functioning properly

I'm currently facing an issue while trying to upload a CSS file and a JavaScript file to a custom theme on WordPress. When I open the webpage, nothing appears and there are no elements displayed. However, when I delete the functions.php file, the webp ...

Animating the scaling of a background image with JavaScript resulted in a jittery, unstable image

I'm encountering a shaking effect when I animate a DIV container with a background image using JS. How can I make the animation smoother? $('body').on('click', '#container', function() { $("#container").animate({ ...

Is it possible to trigger a function using an event on "Any specified selector within a provided array"?

Trying to figure out how to show/hide a group of divs with different IDs by executing a function after creating an array of IDs for the NavBar. I'm having trouble getting started, but here's what I was thinking: $.each(array1, function(i, value) ...

Enable clickable elements positioned behind an iframe

I am currently working on integrating a third-party chatbot into my web application using an iframe in ASP.NET MVC. Like with any chatbot, a button is provided to start a chat (located on the right-hand side below the screen). When this button is clicked, ...

Methods for anchoring an element at the bottom of a square container div

* { box-sizing: border-box; } .publication { display: flex; width: 100%; margin-top: 6%; } .bottom1, .bottom2 { display: flex; flex-direction: column; ...

Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome: https://i.sstatic.net/bzgOT.jpg Internet Explorer: https://i.sstatic.net/qHH1r.jpg The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on In ...

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

Do custom Bootstrap 4 variables fail to cascade downwards?

Discovering a strange behavior in the custom.scss file of Bootstrap, I realized that setting a custom color and removing the !default flag doesn't cascade down as expected. For example, updating $blue to #000 without !default in _custom.scss should id ...

Overlap of columns within a nested flexbox arrangement

While working with React and Styled Components, I encountered a problem of elements overlapping each other: https://i.stack.imgur.com/RuCYu.png There are a few instances of overlap, including: The padding below the <ul> element is colliding with ...

Is there a way to place a button in the top-right corner next to my Bootstrap 5 card?

Can someone help me figure out how to position a button on the top right corner next to my bootstrap card? Here's the code I have so far: <div className="row p-5 m-2"> {savedEpisodes?.map((saved) => { return ( ...

Add the parent div using the child divs

Is it possible to add a div before div 1 in this code structure, even though the script is nested deep within other divs? <div id="1"> <div id="2"> <div id="3"> <style> #4 {...} </style ...

CSS 3 blur filter without the use of transition timing

After discovering a unique method for achieving cross-browser blurring effects, I noticed that the transition wasn't quite working as expected. To solve this issue, I decided to make some adjustments by increasing the transition time and blur amount. ...