Design your own custom up and down arrow icons or buttons using CSS styling techniques

Is there a way to create "up and down" control buttons using only CSS and no background image?

I attempted to add CSS for arrows in "li.className:after or li.className:before", but it caused the main boxes to move.

Check out the Fiddle link to see the issue I am facing: http://jsfiddle.net/8usFk/

Here is the code:

HTML

<div class="positionCameras">
    <ul>
        <li title="Move Up" class="cameraLeft" id="cameraUp"></li>
        <li title="Camera" class="cameraIcon"></li>
        <li title="Move Down" class="cameraRight" id="cameraDown"></li>
    </ul>
</div>

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
}
.positionCameras li.cameraLeft:before {
    content:" ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraRight:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

If you require more information, feel free to ask.

Please provide suggestions on how to resolve this issue.

htmlcsscss-shapesarrow-keys

Answer №1

By applying the css property display: inline-block to the pseudo element, you are able to adjust its size accordingly.

Additionally, follow these steps:

  1. To center it, use text-align: center on the parent element.
  2. To vertically align it, set line-height: 20px (25px - 5px, which is half of the height of the pseudo element), and apply vertical-align: middle to the pseudo element itself:

View Demo

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: top; /* UPDATE */
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    text-align: center; /* UPDATE */
    line-height: 20px; /* UPDATE */
}
.positionCameras li.cameraLeft:before {
    content: "";
    display: inline-block; /* UPDATE */
    width: 0;
    height: 0;
    vertical-align: middle; /* UPDATE */
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraRight:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

Answer №2

This particular feature will always center the arrows regardless of their size, eliminating the need for fixed value margins.

Check out the JSfiddle demo here

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: top; /* added */

}
.positionCameras li.cameraLeft, 
.positionCameras li.cameraIcon, 
.positionCameras li.cameraRight {
    position: relative; /* added */
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
}

.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraLeft:before,
.positionCameras li.cameraRight:before{
    content:""; 

    /* Added for positioning magic */
    position: absolute; 
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);    
    transform: translate(-50%, -50%);  
    /* End of added code */

    width: 0;
    height: 0;
    border-style: solid;
}

.positionCameras li.cameraLeft:before {
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}

.positionCameras li.cameraRight:before {
    border-width: 10px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

Answer №3

Make sure to include the following code snippet

vertical-align:top;

in your CSS styling for the div element.

Your CSS class should look something like this:

.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    vertical-align:top;
}

By adding that line of code, everything should display correctly.

Check out the result here: http://jsfiddle.net/rhX87/

UPDATE

To ensure proper alignment of the image, add the following CSS:

position:relative;
bottom:11px;
left:7px;

within the 

.positionCameras li.cameraLeft:before
class.

With this adjustment, the image should be centered as desired.

View the updated version here: http://jsfiddle.net/rhX87/1/

I hope this explanation helps!

Answer №4

Another option is to utilize HTML character entities and achieve the desired result, as demonstrated in this Code Playground

Answer №5

Check out my basic HTML version. Don't forget to include the JavaScript function "incrementMyNumber()" for handling click events. The key here is the negative margin on the divs containing the arrows. You may have to adjust some numbers, but this layout works well in both IE and Chrome.

<table>
<td>
    <input type="text" id="myNumber" style="width:50px" value="5" />
</td>
<td>
    <table style="border-spacing:0px;margin-left:-2px;width:20px;">
        <tr>
            <td style="border:1px solid black;height:8px;background-color:#dcdcdc;cursor:pointer" onclick="incrementMyNumber(1)">
                <div style="margin:-5px;font-size:8px;">&#x25B2;</div>
            </td>
        </tr>
        <tr>
            <td style="border: 1px solid black; height: 8px; background-color: #dcdcdc;cursor:pointer" onclick="incrementMyNumber(-1)">
                <div style="margin:-5px;font-size:8px;">&#x25BC;</div>
            </td>
        </tr>
    </table>
</td>

Answer №6

VIEW DEMO

HTML Code:

<div class="cameraPositioning">
    <ul>
        <li title="Move Up" class="cameraLeft" id="cameraUp"></li>
        <li title="Camera View" class="cameraIcon"></li>
        <li title="Move Down" class="cameraRight" id="cameraDown"></li>
    </ul>
</div>

CSS Style:

.cameraPositioning ul, .cameraPositioning li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.cameraPositioning li.cameraLeft, 
.cameraPositioning li.cameraIcon, 
.cameraPositioning li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    vertical-align:top;
}
.cameraPositioning li.cameraLeft:before,
.cameraPositioning li.cameraRight:before{
    padding:5px;
    color:#007bff;
    font-size:16px;
    line-height:25px;
}
.cameraPositioning li.cameraLeft:before{
    content:"▼";
}
.cameraPositioning li.cameraRight:before{
    content:"▲";
}
.cameraPositioning li.cameraIcon:before{
    content:"•";
    padding:5px;
    color:#111;
    font-size:48px;
    line-height:25px;
}

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

Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

Currently, I am using the Superfish menu in Drupal7 and have designed my first item level to be vertical. However, I now want to style my second item level horizontally. I have tried various CSS approaches and added some class names via jQuery like $(&apo ...

javascripthtmlcssmenusuperfish

Can you suggest some unconventional HTML/CSS attributes and tools for arranging a form in a way that results in a unique tab order?

As part of my role, I am tasked with transforming mock specs provided by our clients into custom web forms. Our application comes equipped with tools specifically developed to streamline this process. Recently, I was presented with a particularly intriguin ...

htmlcss

The Datatable feature is malfunctioning, unable to function properly with Javascript and JQuery

As a novice in the world of jquery/javascript, I find myself struggling with what may seem like an obvious issue. Despite following tutorials closely (the code for the problematic section can be found at jsfiddle.net/wqbd6qeL), I am unable to get it to wor ...

javascriptjqueryhtmlcss

Using jQuery to change the `class` of the parent `div` based on the length of a `p`

I am attempting to adjust the height of a parent div based on the length of text in its child p.descr. This is achieved by adding a specific class that corresponds to different height values in CSS. Below is the jQuery code snippet: $(document).ready(fu ...

jqueryhtmlcss

Sort the parent by the number present in the child item using jQuery

Is there a way to rearrange a list of items based on a specific number within each item? Consider the following HTML structure that cannot be modified: <ul id="ul-list"> <li> <div class="name">product 1</div> & ...

javascriptjqueryhtml

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

I am implementing a Jquery pop up in my code: <script type="text/javascript"> function showAccessDialog() { var modal_dialog = $("#modal_dialog"); modal_dialog.dialog ( { title: "Access Lev ...

javascriptjqueryhtmlasp.net

The secrets behind the seamless, fluid layout of this website

Upon exploring the website www.emblematiq.com, I noticed that it features a fluid/liquid layout. Despite analyzing the code, I am unable to decipher how this effect is achieved. The layout appears to be fixed width with the canvas element set at 1180px. D ...

htmlcssfluid-layoutliquid-layout

Achieving success with the "silent-scroll" technique

I've been struggling to implement the 'scroll-sneak' JavaScript code for quite some time now. This code is designed to prevent the page from jumping to the top when an anchor link is clicked, while still allowing the link to function as inte ...

javascriptjqueryhtmlcss

Using jQuery and AJAX to submit a dynamic form

I am currently facing an issue with cloning a HTML drop down list using jQuery. The main problem I am encountering is that there seems to be no restriction on the number of cloned sections, and I need to store all these sections in a mySQL database. How c ...

javascriptjqueryhtmlajax

Ways to initiate a CSS transition without hovering over it

Currently, I have a sidebar that is hidden and only shows up when the mouse hovers over it. I'm wondering how I can make the CSS transition trigger before the mouse hover, similar to what happens in this sidebar link: . Any advice on how to achieve th ...

csshovercss-transitions

Issues persist while attempting to save sass (.scss) files using Atom on a Mac

When attempting to work with sass files, I encountered an error message every time I tried to save the file: Command failed: sass "/Users/bechara/Desktop/<path of the file>/test.scss" "/Users/bechara/Desktop/<path of the file>/test.css" Errno: ...

cssnode.jsnpmsassatom-editor

Assign a background image to a button using an element that is already present on the page

Is there a way to set the background-image of a button without using an image URL? I am hoping to use an element already in the DOM as the background-image to avoid fetching it again when the button is clicked. For example, caching a loading gif within the ...

javascriptjqueryhtmlcss

What is the best way to add the current date to a database?

code: <?php session_start(); if(isset($_POST['enq'])) { extract($_POST); $query = mysqli_query($link, "SELECT * FROM enquires2 WHERE email = '".$email. "'"); if(mysqli_num_rows($query) > 0) { echo '<script&g ...

javascriptphpjqueryhtmlcss

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code. I have the tree structure and a recursive function that adds all the tree elements ...

javascripthtmlcss

Move the accordion slider to the top of the browser

I'm working with an accordion menu that has some long content. To make it more user-friendly, I want to add a slide effect when the accordion items are opened. Right now, if you open the first two menu items, the last item's content is cut off a ...

javascriptjquerycssscrollaccordion

merge two structures to create a unified entity

I have been searching in vain, can you please advise me on how to combine these two simple forms into one? I want it to be like a box with a select option and a button. The challenge for me is merging the two different actions, ".asp", into one script fo ...

javascripthtmlasp.netforms

Tips for utilizing jQuery or AJAX to automatically update a div every 10 seconds

Seeking assistance from fellow developers. Working on a PHP web app utilizing the Yii MVC framework and its array of tools. Specifically, I am looking to dynamically refresh a div every 10 seconds. Currently, my Ajax function looks like this: <script t ...

jqueryhtmlajaxrefresh

Transforming an ASPX textbox input into HTML formatted text

When I fill out the address textbox in my application for sending an inquiry email, and press enter after each line like the example below: 33A, sector -8, /*Pressed enter Key*/ Sanpada, /*Pressed enter Key*/ Navi mumbai. It should ...

c#htmlasp.netemail

Steps for implementing Onclick event within the <Script> tag to display a div:

I am currently working on a code that allows me to show and hide a <div> element after clicking on an advertisement from any website. This advertisement is generated by a script. How can I implement the onclick event within the <script> tag? T ...

javascriptjqueryhtmlonclickdom-events

Tips for preventing the larger background from displaying a scroll on a web page

Specifically tailored for this specific page: I am looking to eliminate the scrollbar at the bottom of the browser, similar to how it appears on this page: Thank you ...

htmlcss