How to get categories in wordpress?

Dropdown Box

Here's how to create a dropdown box of the subcategories of, say, a category that archives information on past events. This mirrors the example of the dropdown example of wp_get_archives which shows how to create a dropdown box for monthly archives.
Suppose the category whose subcategories you want to show is category 10, and that its category "nicename" is "archives".
<select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> 
 <option value=""><?php echo esc_attr(__('Select Event')); ?></option> 
 <?php 
  $categories = get_categories('child_of=10'); 
  foreach ($categories as $category) {
   $option = '<option value="/category/archives/'.$category->category_nicename.'">';
 $option .= $category->cat_name;
 $option .= ' ('.$category->category_count.')';
 $option .= '</option>';
 echo $option;
  }
 ?>
</select>

List Categories and Descriptions

This example will list in alphabetic order, all categories presented as links to the corresponding category archive. Each category descripition is listed after the category link.
<?php
$args = array(
  'orderby' => 'name',
  'order' => 'ASC'
  );
$categories = get_categories($args);
  foreach($categories as $category) { 
    echo '<p>Category: <a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a> </p> ';
    echo '<p> Description:'. $category->description . '</p>';
    echo '<p> Post Count: '. $category->count . '</p>';  } 
?>

Get only top level categories

To get the top level categories only, set parent value to zero. This example gets link and name of top level categories.
<?php
$args = array(
  'orderby' => 'name',
  'parent' => 0
  );
$categories = get_categories( $args );
foreach ( $categories as $category ) {
 echo '<a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a><br/>';
}
?>
Source: https://codex.wordpress.org/Function_Reference/get_the_category_list

Remove Default round border of select element in Mac OS Browser, Chrome and android

select{ 
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;   
   -webkit-border-radius: 0;  /* Safari 3-4, iOS 1-3.2, Android 1.6- */    
   -moz-border-radius: 0;  /* Firefox 1-3.6 */     
   border-radius: 0;  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}

How to get element by class?

<div class="color">
  <p>P element in first div with color. Div's index is 0.</p>
</div>


<script>
var x = document.getElementsByClassName("color");
alert(x[0].innerHTML);
</script>